I am having issues with displaying and hiding based on checkbox click events. Can anyone assist in identifying the mistake?
When clicking on an ID, it should hide the ID column. Similarly, clicking on "first" should show/hide based on checkbox clicks, and the same for other fields triggered by checkbox events.
<html>
<head>
<title>VueJs Demo Example</title>
<script src="https://unpkg.com/vue@3"></script>
</script>
</head>
<body>
<h1 id="app">{{ message }}
<div v-for="field in fields">
<input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
<label>{{field.label}}</label>
</div>
<tr>
<th> ID </th>
<th>first</th>
<th>last</th>
<th>age</th>
</tr>
<div v-for="item in items" :fields="visibleFields">
<table>
<tr>
<td>{{item.id}}</td>
<td>{{item.first}}</td>
<td>{{item.last}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</h1>
<script>
const {
createApp
} = Vue
createApp({
data() {
return {
items: [{
id: 1,
first: 'Mike',
last: 'Kristensen',
age: 16
}, {
id: 2,
first: 'Peter',
last: 'Madsen',
age: 52
}, {
id: 3,
first: 'Mads',
last: 'Mikkelsen',
age: 76
}, {
id: 4,
first: 'Mikkel',
last: 'Hansen',
age: 34
}, ],
fields: [{
key: 'id',
label: 'ID',
visible: true
}, {
key: 'first',
label: 'First Name',
visible: true
}, {
key: 'last',
label: 'Last Name',
visible: true
}, {
key: 'age',
label: 'Age',
visible: true
}, ]
}
},
computed: {
visibleFields() {
return this.fields.filter(field => field.visible)
}
},
}).mount('#app')
</script>
</body>
</html>
Please let me know if further clarification is needed.
Thank you in advance