Не отслеживает изменения в watch

17 февраля 2021, 10:40

Так я передаю объект с данными в родительском контроле,который находится в popup окне:

<k-control :data="data" :list_analyses="list.find(el=> el.AnalysisName == 'Гемоглобин')"/>

В дочернем контроле он приходит в props: ['list_analyses']. Я его раскладываю в input с проверками :value="list_analyses ? list_analyses.UnitName : ''".

Проблема в отслеживании изменений этого объекта, который приходит в дочерний компонент. Есть watch, который должен следить за изменениями:

watch: {
  list_analyses: {
            handler: function (newVal, oldVal){
                console.log('newVal = ',newVal, 'oldVal = ', oldVal)
            },
            deep: true
        }
}

А он срабатывает только в момент, когда открываю popup окно, но не в момент редактирования данных.

Answer 1

Судя по вопросу, основная проблема - передача и синхронизация данных между дочерним и родительским компонентами. Схожие ответы.

// Отключим ненужные для примера 
// сообщения в консоли. 
Vue.config.productionTip = false 
Vue.config.devtools = false 
 
const KControl = { 
  props: ['list', 'analysis_name'], 
  data() { 
    return { 
      analysis: {} 
    } 
  }, 
  // При создании компонента отыскиваем необходимый элемент. 
  created() { 
    this.analysis = this.$props.list.find(el => el.AnalysisName == this.$props.analysis_name) 
  }, 
  template: `<div> 
                <label>{{ analysis_name }}</label> 
                <input type="text" v-model="analysis.UnitName" /> 
            </div>`, 
} 
 
new Vue({ 
  el: '#app', 
  components: { 
    'k-control': KControl 
  }, 
  data: { 
    list_analyses: [ 
      {AnalysisName: 'Гемоглобин', UnitName: 4.8}, 
      {AnalysisName: 'Aльбумин', UnitName: 43.4} 
    ] 
  } 
});

label { 
  display: block; 
  margin-top: 15px; 
}

<div id="app"> 
  <template v-for="item in list_analyses"> 
            <!-- 
                Передаём в дочерний компонент весь список и идентификатор, 
                по которому будет осуществлен поиск необходимо элемента из списка. 
            --> 
            <k-control :list="list_analyses" :analysis_name="item.AnalysisName"></k-control> 
        </template> 
  <h3>Данные в родительском компоненте:</h3> 
  <pre>{{ list_analyses }}</pre> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>