Запустить / обновить изменение данных от дочернего компонента к родительскому компоненту в Quasar / Vue, если дочерний компонент имеет список элементов - PullRequest
Новая
       66

Запустить / обновить изменение данных от дочернего компонента к родительскому компоненту в Quasar / Vue, если дочерний компонент имеет список элементов

1 голос
/ 05 апреля 2020

Я использую 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 as props``` от родителя.

У меня есть следующий пример кода для comp4: durationOptions поступает в качестве реквизита через Vuex store. Я получаю сообщение об ошибке в строке @click="option.selected = !option.selected" из-за прямого обновления магазина Vuex. 

<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 store как и когда использовал, нажимает на CHECKBOX? Я предпочитаю обновлять магазин Vuex при отправке / сохранении. До отправки, как я могу изменить локальные / временные данные? Как я могу @emit перейти от comp4 к родителю? Любая помощь мне очень ценится.

1 Ответ

1 голос
/ 05 апреля 2020

Вы можете сохранить состояние родительского элемента, а затем отправить все в магазин следующим образом:

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>
...