如何从我的 Vuetify 数据正确更新 Vuex 状态-table

Question

我正在使用 Vue、Vuex 和 Vuetify 在 data-table 中显示课程，并希望将内联编辑作为一项功能。请参阅下面的相关组件代码。

#Courses.vue

<template>
  <v-data-table 
  :headers="headers"
  :items="courses"
  :search="search"
  :loading="loading"
  no-data-text="No Courses Available"
  >

    <template slot="items" slot-scope="props">
      <tr>
        <td>
          <v-edit-dialog
          :return-value.sync="props.item.title"
          lazy
          >
            {{ props.item.title }}
            <v-text-field
            slot="input"
            label="Enter New Course Title"
            v-model="props.item.title"
            single-line
            counter
            @keyup.enter="onUpdateCourse({ id: props.item.id, title: props.item.title})"
            ></v-text-field>
          </v-edit-dialog>
        </td>

        <td>{{ props.item.category }}</td>
        <td>{{ props.item.startDate | date }}</td>
        <td>{{ props.item.endDate | date }}</td>
        <td>{{ props.item.location }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data() {
      return {
        headers: [** table headings **],
      };
    },
    computed: {
      courses() {
        return this.$store.getters.courses;
      },
    },
    methods: {
      onUpdateCourse(itemToUpdate) {
        debugger;
        this.$store.dispatch('updateCourse', itemToUpdate);
      },
    },
  };
</script>

有效；但我对这种方法直接改变 Vuex 状态这一事实表示质疑：dispatch('updateCourse', itemToUpdate) 的唯一原因是更新数据库（在本例中为 firestore）。我认为最好仅通过 Vuex actions/mutations 更新 $store.state 而不是直接在此处同步。

所以，我的第一个问题是：我应该对此提出异议吗？如果不是，为什么不呢？

因为它困扰着我，所以我将 Vuex 课程数组的本地副本添加到计算部分：

localCopy() {
  return this.courses.map(x => Object.assign({}, x));
},

并使用 :items="localCopy" 构建数据 -table。这允许我从 Vuex 操作中更新课程，但数据 table 不会更新，直到我在应用程序中单击其他地方。

所以，我的第二个问题是：如果这是正确的方法，我该如何保持组件的反应性？

感谢您的帮助。

(PS – 在剪切和粘贴代码或在文本框中编辑时，似乎某些双引号 " 不幸地转换为花式引号 “ .更不幸的是我有阅读障碍，虽然我已经尽了最大努力去追捕他们，但我实际上大部分时间都看不到他们。请不要讨厌我)

Answer 1

要不将更改分配给 props.item.title，请执行：

删除 <v-edit-dialog :return-value="props.item.title" 中的 .sync。
将 v-model 替换为 <v-text-field :value="props.item.title" 中的 :value。

与 .sync has an implicit @return-value:update="props.item.title = $event" and v-model has an implicit @input="props.item.title = $event (roughly) 一样，仅上述（删除 .sync 并将 v-model 替换为 :value）将阻止 title 被直接修改。

要通过 dispatch 对其进行修改，还要添加一个 @input 调用调度的侦听器：@input="onUpdateCourse({ id: props.item.id, title: props.item.title})".

最后，您的代码应如下所示：

<td>
  <v-edit-dialog
  :return-value="props.item.title"
  lazy
  >
    {{ props.item.title }}
    <v-text-field
    slot="input"
    label="Enter New Course Title"
    :value="props.item.title"
    @input="onUpdateCourse({ id: props.item.id, title: props.item.title})"
    single-line
    counter
    @keyup.enter="onUpdateCourse({ id: props.item.id, title: props.item.title})"
    ></v-text-field>
  </v-edit-dialog>
</td>

如何从我的 Vuetify 数据正确更新 Vuex 状态-table

How do I properly update Vuex state from my Vuetify data-table

vue.js

vuex

vuetify.js