web-dev-qa-db-ja.com

VuetifyデータテーブルからVuexの状態を適切に更新するには

Vue、Vuex、およびVuetifyを使用してコースをデータテーブルに表示し、インライン編集を機能として必要としています。以下の関連するコンポーネントコードを参照してください。

#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の状態を直接変更するという事実に問題を抱えています。ディスパッチ（ ‘updateCourse’、itemToUpdate）する唯一の理由は、db（この場合はfirestore）を更新することです。 $ store.stateをここで直接同期させるのではなく、Vuexアクション/ミューテーションのみを介して更新する方が望ましいと思いました。

だから、私の最初の質問は、私はこれについて問題を取り上げるべきか、そうでないのであればなぜですか？

私を悩ませていたので、計算セクションにVuexコース配列のローカルコピーを追加しました。

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

:items="localCopy"を使用してデータテーブルを作成しました。これにより、Vuexアクション内からコースを更新できますが、データテーブルはアプリ内の別の場所をクリックするまで更新されません。

それで、私の2番目の質問は、これが正しいアプローチである場合、コンポーネントの反応性をどのように維持するのですか？

助けてくれてありがとう。

（PS –コードをカットアンドペーストしたり、テキストボックスで編集したりすると、二重引用符"のいくつかが空想的な引用符“に変換されているようです。私が失読症であるのは残念です。そして、私は彼らを追い詰めるために最善を尽くしましたが、文字通りほとんどの時間それらを見ることができません。私を憎まないでください）

vue.jsvuexvuetify.js
8
Adam

_props.item.title_に変更を割り当てないようにするには、次のようにします。

  • _.sync_の_<v-edit-dialog :return-value="props.item.title"_を削除します。
  • _v-model_の_:value_を_<v-text-field :value="props.item.title"_に置き換えます。

_.sync_には暗黙の_@return-value:update="props.item.title = $event"_ および _v-model_には暗黙の_@input="props.item.title = $event_（おおまかに） があり、上記だけ（_.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>
_
9
acdcjunior