代码如下
<html>
<head>
<title>Vuejs demo</title>
</head>
<body>
<p id="demo">
<p v-for="post in posts">
<p class="post" v-bind:class="{'post-isread':isread, 'post-unread':unread}">
<input type="checkbox" :id="post" v-model="isread" :value="post">
<label :for="post">{{ post }}</label>
{{ isread }}
</p>
</p>
</p>
</body>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
</html>var demo = new Vue({
el: '#demo',
data: {
posts: ['This is a post', 'another post', 'last post'],
isread: false,
unread: true,
}
})
jsfiddle: https://jsfiddle.net/gaotongfei/b2mjrzw6/1/
这是一段非常简短的用vuejs写的checkbox demo，但是点击其中的一个checkbox，剩下的都会被选中，请问哪里错了？
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
因为你的input绑定的不是每个post自己的isread属性，而是唯一的一个isread属性，所以一改所有都改。
你的model需要重构，每个post应该是一个json对象而不是字符串。
因为你绑定了同一个model:
v-model="isread",点击后isread值为true,就都选中了