Question

我对Vuetify复选框和Vuex有问题。我想要的是：复选框未选中，一个复选框被选中时，人对象被推到selected-array。这就是Vuetify docs中的工作方式。即使将复选框v建模为空的错误，也将选中该复选框。带有复选框的表通过getter填充为计算值，首先将数据放入状态，然后在创建的生命周期中调度一个动作。一开始，当我只使用静态数据时，复选框和其他功能运行良好，但是当我开始使用来自Vuex的异步数据时，复选框便开始被预先检查。如果我在创建的生命周期中注释掉dispatch命令，则不会选中该复选框。当然，如果Vuex中的状态不包含数据，则表将不包含来自getter的数据。但是，如果我转到已发出调度的另一页并返回到表格页，则吸气剂现在从状态获取数据，并且未预先选中复选框。

有人知道为什么会这样吗？

<template>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr>
          <th @click="selectAll">Select</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in getPersons" :key="index">
          <td>
            <v-checkbox v-model="selected" :value="person"></v-checkbox>
          </td>
          <td>{{ person.firstName }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
export default {
  created() {
    this.$store.dispatch("activePersons");
  },
  data() {
    return {
      selected: []
    };
  },
  computed: {
    getPersons() {
      const data = [
        {
          firstName: "John"
        },
        {
          firstName: "James"
        }
      ];
      console.log(data);
      let test = this.$store.getters.getList;
      return test;
    }
  },
  methods: {
    selectAll() {
      if (this.selected.length == this.getPersons.length) {
        this.selected = [];
      } else {
        this.selected = this.getPersons;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

从Vuex获取数据时会预先选中Vuetify复选框

0 个答案: