I am encountering a situation with a series of input fields, including a checkbox and a dropdown button in each row. Additionally, there is a button to add a new row of inputs.
When the checkbox is checked, it should disable the dropdown menu and make it non-required.
<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>
The initial checkbox behavior works as intended, but upon adding a new row, the new row is always pre-checked and behaves oppositely. My question is how can I correct my v-model?