Компонент Vuejs не обновляется при изменении переменной - PullRequest
Новая
       8

Компонент Vuejs не обновляется при изменении переменной

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

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

Например: 

<template>
<div>
    <detail :obj="currentObject"></detail>
</div>
</template>
<script>
export default: {
  data: function(){
    return {
      currentObject: null,
      objs = [
        {name:'obj 1'},
        {name:'obj 2'}
      ]
   };
  }
}
</script>

Когда я делаю this.currentObject = objs[0], компонент detail обновляется с правильным содержанием. Однако в следующий раз, когда я позвоню this.currentObject = objs[1], компонент detail больше не обновляется.

1 Ответ

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

Не уверен, в каком контексте вы переключаете данные на вашем currentObject, но ниже приведен компонент детализации концепции, и когда вы переключаете objs, он обновляет реквизит :obj и, кажется, работает нормально.

Глядя на свой код, вы должны объявить objs, используя :, а не =. 

data: function() {
    return {
      currentObject: null,
      objs: [
        {name:'obj 1'},
        {name:'obj 2'}
      ]
   };
 }

Вот компонент детализации концепции, запустите фрагмент, чтобы убедиться, что он работает. 

Vue.component('detail', {
  props: ['obj'],
  template: '<div>{{ obj }}</div>'
})

var app = new Vue({
  el: '#app',
  data() {
    return {
      bToggle: false,
      currentObject: null,
      objs: [
        {name:'obj 1'},
        {name:'obj 2'}
      ]
    }
   },
   created(){
    this.switchData();
   },
   methods: {
    switchData() {
      if(!this.bToggle){
        this.currentObject = this.objs[0];
      }else{
        this.currentObject = this.objs[1];
      }
      this.bToggle = !this.bToggle;
   }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
    <button @click="switchData()"> switch </button>
    <detail :obj="currentObject"></detail>
</div>
...