Vue: заставлять дочерний компонент реагировать на изменения в его пропе (это словарь) - PullRequest
Новая
       23

Vue: заставлять дочерний компонент реагировать на изменения в его пропе (это словарь)

0 голосов
/ 22 ноября 2018

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

<tr is="entry" v-for="problem in problems" :key="problem.id" v-bind:foo="problem"></tr>

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

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

Vue.component('entry', {
  props: ['foo'],
  data: function(){ 
    //does some computations
    return data
  },
  watch:{
    foo: function(){
      this.recompute_entry()
    },
  },
  methods:{
    //various methods, including:
    recompute_entry: function(){
      //updates the data according to changes brought to the entry
    },
  },
});

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

В конечном счете, я полагался на тот факт, что v-for упорядоченно просматривает мой список, что в сочетании с тем фактом, что я не генерирую других дочерних элементов в моем родительском компоненте, означает, что дочерний компонент будет иметьтот же индекс в массиве детей моего компонента, что и в моем массиве задач.Поэтому я могу использовать это: 

this.$children[problem_index].recompute_entry();

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

1 Ответ

0 голосов
/ 22 ноября 2018

Мне, вероятно, нужно увидеть точную реализацию, но похоже, что вам нужно клонировать ваш словарь, чтобы вызвать изменение реквизита, например: 

let newProblem = Object.assign({}, this.problem);
// change any nested property
newProblem.some.value = 1
// assign back the cloned and modified dictionary
this.problem = newProblem
...