如果子组件有项目列表，则在Quasar/Vue中触发/更新从子组件到父组件的数据更改

Question

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

我可以将$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 as道具``。

我有以下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>

问题是点击复选框，我得到错误[vuex] do not mutate vuex store state outside mutation。我知道我不应该直接更新Vuex商店。或者，我是否需要在每次Vuex存储时以及使用时点击CHECKBOXes进行更新？我更喜欢在提交/保存时更新Vuex商店。在提交之前，我如何更改本地/临时数据？如何将@emit从comp4更改为父级？非常感谢你对我的帮助。

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>