Trigger/update 在 Quasar/Vue 子组件有项目列表的情况下，数据从子组件更改为父组件

Question

我正在使用 Quasar 开发我的应用程序并且仍在学习。如图所示，我有一个包含 4 个子组件的父组件 (https://imgur.com/a/MqWpo9U)。

我可以 $emit 子组件 comp1,2,3 更改为父组件，但我不确定如何从父组件 $emit' change from child comp 4 to parent. Reason being comp4 receive list(please see list of data in comp4) of data asprops```。

我有以下 comp4 代码示例：durationOptions 通过 Vuex 商店作为道具。由于直接更新 Vuex 商店，我在第 @click="option.selected = !option.selected" 行收到错误。

<q-list bordered separator dense no-padding>
    <q-item-label header>Setup duration option and fee</q-item-label>
    <div class="row">
      <q-item-label class="col" dense caption></q-item-label>
      <q-item-label class="col" dense caption>Duration(Hr)</q-item-label>
      <q-item-label class="col" dense caption>Fee($)</q-item-label>
      <q-item-label class="col" dense caption>Discount(%)</q-item-label>
    </div>
    <q-separator spaced />
    <q-item
      clickable
      v-ripple
      v-for="(option, key) in durationOptions"
      :key="key"
    >
      <q-item-section>
        <q-checkbox
          dense
          @click="option.selected = !option.selected"
          v-model="option.selected"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label dense>{{ option.selected }}</q-item-label>
      </q-item-section>

问题是单击 CHECKBOX 时出现错误 [vuex] do not mutate vuex store state outside mutation。我明白我不应该直接更新 Vuex 商店。或者，我是否需要在每次 Vuex 存储时以及在使用 CHECKBOXes 时进行更新？我更喜欢在 submit/save 上更新 Vuex 商店。在提交之前，我如何更改 local/temp 数据？我如何 @emit 从 comp4 更改为 parent？非常感谢任何帮助。

Answer 1

您可以保留父级的状态，然后像这样将所有内容发送到商店：

Parent.vue

<template>
<child :options="options" @option-toggle="onOptionToggle" />
</template>
<script>
  data() {
      return {
        options: {
          foo: {
            title: 'foo',
            isSelected: false
          },
          bar: {
            title: 'bar',
            isSelected: false
          }
        }
      },
      methods: {
        onOptionToggle(key, isSelected) {
          this.$set(this.options[key], 'isSelected', isSelected)
        }
      }
</script>

Child.vue

<template>
<div v-for="(value, key) in options" @click="toggleOption(value, key)"> {{value.title}}</div>
</template>
<script>
  methods: {
    toggleOption(value, key) {
      this.$emit('option-toggle', key, !value.isSelected);
    }
  }
</script>

Trigger/update 在 Quasar/Vue 子组件有项目列表的情况下，数据从子组件更改为父组件

Trigger/update data change from child component to parent component in Quasar/Vue incase of child component has list of items

emit

vue.js

quasar