Блог

Я использую Vue3 с Quasar2, и у меня проблема во время мутации: DOM не обновляется.

1. Код состоит из родительского компонента, списка дочерних компонентов (визуализируется v-for). Данные поступают из хранилища Vuex через вычисляемое свойство.
2. Дочерние компоненты представляют только данные и выдают событие «изменить» с идентификатором представленных данных.
3. В событии «редактировать» родительский компонент заполняет свойства фактическими данными, а представляет диалоговое окно.
4. Когда диалоговое окно закрывается, родитель вызывает действие для хранения данных.
5. Действие (и следующая мутация) выполняются нормально. Хранилище Vuex содержит правильные данные.
6. Но список не обновляется 🙁
7. Если я добавлю новый элемент в список данных (с помощью push), список будет обновлен.

Очищенными источниками являются следующие:

Родитель.vue:

 <template>
  <q-page class="flex flex-center" :key="mykey">
    <q-list padding>
      <child-component
        v-for="d in data"
        v-bind:key="d.id"
        v-bind:data="data"
        v-on:edit-time="onEdit"
      >
      </program>
    </q-list>

    <!-- EDITOR DIALOG -->
    <q-dialog v-model="editing" @hide="onEditDone">
 ....
    </q-dialog>
<script>
....
export default defineComponent({
  name: "PageIndex",
  created: function () {
    this.loadData();
  },
  data: function () {
    return {
      editing: false,
      ....
      },
    };
  },
  components: { Child },
  methods: {
    ...mapActions(["loadData", "updateData"]),
    onEdit(id) {
      ...
      this.editing = true; // <= show dialog
    },
    onEditDone() {
      try {
        ...
        this.updateData(data); // <== Vuex Action which updates an elem of the data list
      } catch (e) {
       ...
      }
    },
  },
  computed: {
    ...mapState({
      data: state => state.data
    }),
  }
});
</script>
 

state.js:

 export default {
  data: [],
}
 

getters.js:

 const getters = {
  data: (state) => {
    return state.data;
  },
};

export default getters;
 

mutations.js:

 updateData: (state, data) => {
  var idx = state.data.findIndex((element) => element.id == data.id);
  state.data.splice(idx, 1, data);
},
 

actions.js:

   async updateData(context, data) {
    try {
      await axios.post(`api/data?id=${data.id}`, data, {
        headers: {
          "Content-Type": "application/json",
        },
      });
      context.commit("updateData", data)
    } catch (err) {
      console.log(err);
    }
  },