Question

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

我的问题是第二个API调用后v-checkbox仍然处于检查状态。如何从支票中删除支票？

我尝试使用v-checkbox来抓取getElementById元素，并将其设置为false getElementById('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>

Answer 1

这是您要做什么吗？ https://codesandbox.io/s/vue-template-qx4nt

您正在使用Vue，您可能永远不必自己操纵dom（仅高级情况下）。如果您是，则可能是您错了。绕过virtual 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>

如何在Vuetify v复选框中删除支票

1 个答案: