vuejs checkbox 选中其中一个box其他的box都会被选中

19082432

发布于
2016-01-18

代码如下

<html>
<head>
  <title>Vuejs demo</title>
</head>
<body>
  <div id="demo">
    <div v-for="post in posts">
      <div 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 }}
      </div>
    </div>
  </div>
</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，剩下的都会被选中，请问哪里错了？

vue.js javascript

阅读 9.4k

3 个回答

得票最新

林岑影

5.9k2517

发布于
2016-01-18

✓ 已被采纳

<body>
  <div id="demo">
    <div v-for="post in posts">
      <div 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] }}
      </div>
    </div>
  </div>
</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],
  }
})