时间戳

首页 > 解决方案 > 如何删除 Vuetify v-checkbox 中的检查

vue.js - 如何删除 Vuetify v-checkbox 中的检查

问题描述

我正在使用 API 调用将数据加载到数据表中。第一行在第一列中有一个复选框。用户通过另一个 API 调用检查复选框按下一个按钮并删除选定的行，并且它下面的行向上移动并且现在将具有与之关联的复选框。

我的问题是v-checkbox第二次 API 调用后的检查。如何从中删除支票？

我尝试使用并将检查设置为 false来抓取v-checkbox元素，但这没有用。getElementByIdgetElementById('myCheckBox').checked = false

<v-checkbox
  class='double'
  @change='selectRow(props.index)'
  :value='props.item.ProcessNumber'
  unchecked-value='Pick'
  v-model='selectedNumber'
  id='myCheckBox'
  ></v-checkbox>

<script>
  var checkBox = getElementById('myCheckBox');
  checkBox = false;
</script>

标签： vue.jsvuetify.js

解决方案

这是你想要做的吗？https://codesandbox.io/s/vue-template-qx4nt

您正在使用 Vue，并且您可能永远不必自己操作 dom（仅限高级案例）。如果你是，你可能用错了。绕过虚拟 DOM通常是个坏主意。

<template>
  <div id="app">
    <v-btn @click="load" :loading="loading">load</v-btn>
    <v-btn @click="remove">remove</v-btn>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index">
        <v-checkbox v-model="selected" :value="item" multiple/>
        {{ item }}
      </v-list-item>
    </v-list>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    loading: false,
    selected: [],
    items: []
  }),
  methods: {
    async load() {
      this.loading = true;

      const items = await new Promise(resolve => {
        setTimeout(() => resolve([1, 2, 3]), 2000);
      });

      this.items = items;
      this.loading = false;
    },
    remove() {
      this.items = this.items.filter(i => !this.selected.includes(i));
      this.selected = [];
    }
  }
};
</script>

推荐阅读