文章/答案/技术大牛

发布

社区首页 >问答首页 >Vuetify处理多个复选框

问Vuetify处理多个复选框
EN

Stack Overflow用户

提问于 2020-08-08 23:57:21

回答 2查看 213关注 0票数 1

我有多个复选框，我想跟踪选定的值，但由于某些原因，在我取消选中某个复选框后，它的标签会被移除，然后重新添加为true或false。

如何使用vuetify正确跟踪复选框中的选定值？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      names: ['John', 'Jacob', 'Jules'],
    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-container fluid>
      <v-checkbox v-for="(name, index) in names" :key="name" v-model="names[index]" :label="name">
      </v-checkbox>
    </v-container>
    Selected names: {{names}}
  </v-app>
</div>

javascript

vuejs2

vuetify.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-09 00:03:36

您可以使用对象数组，标签和复选框值具有单独的字段，如下所示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      names: [
        {value: 'John', selected: true},
        {value: 'Jacob', selected: false},
        {value: 'Jules', selected: true}
      ],
    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-container fluid>
      <v-checkbox v-for="(name, index) in names" :key="index" v-model="name.selected" :label="name.value">
      </v-checkbox>
    </v-container>
    Selected names: <pre> {{names}} </pre>
  </v-app>
</div>

票数 2

Stack Overflow用户

发布于 2020-08-09 00:23:20

或者，如果您想保留相同的数组结构，您可以这样做：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      names: ['John', 'Jacob', 'Jules'],
      selectedNames: []
    }
  },
  methods: {
    handleCheckboxClicks(name) {
      this.selectedNames.includes(name) ?
        this.selectedNames = this.selectedNames.filter(n => n != name) :
        this.selectedNames.push(name)
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app style="margin-bottom: 10rem">
    <v-container fluid>
      <v-checkbox v-for="(name, index) in names" :key="name" @click="handleCheckboxClicks(name)" :label="name">
      </v-checkbox>
    </v-container>
    Selected names: {{selectedNames}}
  </v-app>
</div>

这种方法的问题是它不能处理重复的名字，所以@AnuragSrivastava的答案仍然是一个更好的方法。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63317425

复制

相似问题

问Vuetify处理多个复选框
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuetify处理多个复选框EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuetify处理多个复选框
EN