它应该是显示显示，显示隐藏基地上的复选框点击它是不工作的。谁能帮助哪里是错误的？
一旦我们点击ID，它应该隐藏ID列，如果我们首先点击，它应该隐藏/显示基于复选框点击等复选框事件触发。
<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>我希望它是明确的，请写信，如果有任何需要澄清的方面。
先谢了
1条答案
按热度按时间wbrvyc0a1#
请看下面的代码片段（您可以使用v-if和方法返回列是否可见）：
第一个