Обновление значений, отправленных дочернему компоненту, по клику пользователя в vuejs

Question

У меня есть два компонента в mu app.vue, и я буду отправлять данные из app.vue моему первому компоненту (компоненту фильтра) во время загрузки страницы.

Теперь на основе действий пользователя вотображаемые данные во втором компоненте, мне нужно передать новые вейлы обратно в первый компонент.

Там я использую a и a.Рассмотрим один из реквизитов, которые я получаю в первом компоненте: «nselectedOption», и я делаю это в данных: {return {selectedOption: this.nselectedOption}}, чтобы избежать предупреждения о мутации.

Теперь каждый раз, когда я обновляю значения дляэтот компонент из второго компонента, я вижу изменения только в «nselectedOption», а не в «selectedOption».Можете ли вы объяснить, почему это так?

Мне нужно обновленное значение в v-модель.1. Если я использую «nselectedOption», он обновляет текстовое поле, но при редактировании значения выдает ошибку.2. Если я использую «selectedOption», он не обновляет значения в самом текстовом поле.

Я даже пытался использовать вычисленные значения для возврата значения, это работает, но если я пытаюсь изменить значения в других параметрахв компоненте фильтра уже обновленные значения отображают ноль или ничего.

Пожалуйста, помогите мне.Может ли эта проблема быть решена с помощью концепции управления состоянием или мне нужен отдельный компонент, отличный от App.Vue, чтобы сделать все это, чтобы он действовал как нечто вроде родителя / ребенка, или есть какой-то другой способ преодолеть это?

Answer 1

Попробуйте использовать watcher. Если вы наблюдаете за nselectedOption, каждый раз, когда он изменяется, наблюдатель будет запускать и привязывать измененное значение к selectedOption.

props: ['nselectedOption'],
data: {
    selectedOption
},
watch: {
    nselectedOption: function (val) {
        this.selectedOption = val
    }
}

Также, если реквизит, который вы смотрите, является объектом / массивом, рассмотрите возможность использования оператора распространения, если вы хотите сделать локальную копию, чтобы избежать мутации.

this.someObj = { ...someProp }