问

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

圣友家具简章da 发布于 2022-11-19 09:18

html

代码如下



  Vuejs demo


  
    

      

        
        {{ post }}
        {{ isread }}

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

3 个回答

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

2022-11-19 09:27 回答

好人木庄子mzz
因为你的input绑定的不是每个post自己的isread属性，而是唯一的一个isread属性，所以一改所有都改。

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

2022-11-19 09:27 回答

手机用户2502908547

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

2022-11-19 09:27 回答

雅枝建彰3

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签