찾다

 >  Q&A  >  본문

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

代码如下

<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,剩下的都会被选中,请问哪里错了?

巴扎黑巴扎黑2897일 전411

모든 응답(3)나는 대답할 것이다

  • 巴扎黑

    巴扎黑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],
      }
    })

    회신하다
    0
  • 大家讲道理

    大家讲道理2017-04-10 16:53:51

    因为你的input绑定的不是每个post自己的isread属性,而是唯一的一个isread属性,所以一改所有都改。

    你的model需要重构,每个post应该是一个json对象而不是字符串。

    회신하다
    0
  • 高洛峰

    高洛峰2017-04-10 16:53:51

    因为你绑定了同一个model:v-model="isread",点击后isread值为true,就都选中了

    회신하다
    0
  • 취소회신하다