更改变量时Vuejs组件不更新

Question

我正在学习 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 不再更新。

Answer 1

不确定您在currentObject 上切换数据的上下文是什么，但下面是一个概念详细信息组件，当您切换objs 时，它更新了prop :obj 并且似乎工作正常。

查看您的代码，您应该使用: 而不是= 声明objs。

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

这里是概念细节组件，运行 sn-p 来检查它是否工作。

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>