Vue v模型不适用于数组的单个索引

Question

我有一行输入：一个复选框和一个下拉按钮。

然后，还有另一个按钮来添加一行新的输入。

如果选中该复选框，则会禁用下拉列表并使其成为非必需项。

<template>
<div>
<tr v-for="(item, i) of timesheet.items" :key="i">
<div>
<td>
<input 
type= "checkbox"
v-model="checked"
id= "{{ 'disable' + i }}" 
v-on:click= "disable(i)"
>
</td>
<td>
<select2 
:id="'project_id-' + i" 
v-bind:class="{
'is-invalid': item.project_id.$error,
'is-valid':
item.project_id.$dirty &&
!item.project_id.$error,
}"
>
<option value="">Select</option>
<option v-for="(project) in projects" 
:selected="project.id == timesheet.project_id" 
:key="project.id" 
:value="project.id">{{ project.name }}</option>
</select2>
</td>
<td>
<button 
type="button" 
class="btn btn-sm btn-primary" 
@click="itemCount++"
>Add Row
</button>
</td>
</div>
</tr>
</div>
</template>

<script>
import { required, minLength } from "vuelidate/lib/validators";
export default {
data() {
return {
checked: false,
timesheet: { items: [{ project_id: "" }] },
}
},
validations() {
if (!this.checked) {
return{
itemCount: 1,
timesheet: {
items: {
required,
minLength: minLength(1),
$each: { project_id: { required }}
}
}
}
}else{
return{
timesheet: {
items: {
required,
minLength: minLength(1),
$each: { project_id: {} }
}
}
}                
}
},
watch: {
itemCount(value, oldValue) {
if (value > oldValue) {
for (let i = 0; i < value - oldValue; i++) {
this.timesheet.items.push({
project_id: "",
checked: false,
})
}
} else {
this.timesheet.items.splice(value);
}
}
},
methods: {            
disable(index){
const check = 
document.getElementById('project_id-' + index).disabled
$('#project_id-' + index).attr('disabled', !check);
}
},        
}
</script>   

第一个复选框按预期工作，但每当添加另一行时，新的一行总是预先选中的，并且表现与第一行完全相反。

所以，我的问题是如何修复我的v模型？

Answer 1

我看到您的代码有几个问题。

首先，复选框有id= "{{ 'disable' + i }}"，不允许在属性中使用插值，应该使用:id="'disable' + i"。

其次，我仍然不明白你在哪里定义了itemsCount，我假设它在data下。

第三，所有复选框都使用相同的v模型，这就是data下的checked模型。因此，单击任何复选框都将更改checked，并且此更改也将在其他复选框中更新。这就是为什么你所有的复选框都是同步的。

第四，您已经定义了timesheet: { items: [{ project_id: "" }] }，所以item只包含project_id属性。但稍后添加项目时，您将使用this.timesheet.items.push({ project_id: "", checked: false })，这告诉我您正在尝试为每个item使用checked属性，您打算将其用于每个复选框。好吧，那么你的想法是对的。

您需要做的是向data中的items添加一个checked属性，并将其用作复选框的v模型。

data() {
return {
itemCount: 1,
timesheet: { items: [{ project_id: "", checked: false }] },
};
},

<input
type="checkbox"
v-model="item.checked"
:id="'disable' + i"
v-on:click="disable(i)"
/>