代码如下
<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，剩下的都会被选中，请问哪里错了？
巴扎黑2017-04-10 16:53:51
<body>
<p id="demo">
<p v-for="post in posts">
<p class="post" v-bind:class="{'post-isread':isread[$index], 'post-unread':unread[$index]}">
<input type="checkbox" :id="post" v-model="isread[$index]" :value="post">
<label :for="post">{{ post }}</label>
{{ isread[$index] }}
</p>
</p>
</p>
</body>var demo = new Vue({
el: '#demo',
data: {
posts: ['This is a post', 'another post', 'last post'],
isread: [false, false, false],
unread: [true, true, true],
}
})
大家讲道理2017-04-10 16:53:51
因为你的input绑定的不是每个post自己的isread属性，而是唯一的一个isread属性，所以一改所有都改。
你的model需要重构，每个post应该是一个json对象而不是字符串。
