vue.js - weex 数据更改以更新到子组件

Question

<template>
    <topView viewInfo="cardInfo"></topView>
    <bottomView viewInfo="cardInfo"></bottomView>
<template>
<script>
     module.exports = {
        data: {
          viewInfo:{
             attr0:value0,
             attr1:value1
          }
       },
       mounted:function(){
          getDataFromServer();
       },
       methods:{
          getDataFromServer:function(){
            var me = this;
            var httpRequest = Service.getViewInfo();
            httpRequest.on("success",function(data){
               me.viewInfo.attr2 = data.info.attr2;
               me.viewInfo.attr3 = data.info.attr3;
               me.viewInfo.attr4 = data.info.attr4;

           });
           httpRequest.send();
      }
    }
  }
</script>

顶视图.vue

<template>
<div>
  <text>{viewInfo.attr0}</text>
  <div v-for="(item, index) in getItems">
        <text>{item.text}</text>
        <text>{item.info}</text>
  </div>
  <text>{viewInfo.attr1}</text>
</div>
<template>

<script>
 module.exports = {
    data: {
      itemInfo:[
          {text:'text 0',info:"****"},
          {text:'text 1',info:"****"},
          {text:'text 2',info:"****"}
      ]
    },
    props:{
        viewInfo:{}
    },
    computed:{
      getItems:function(){
        this.itemInfo[0].info = this.viewInfo.attr2 +" point";
        this.itemInfo[1].info = this.viewInfo.attr3 +" point";
        this.itemInfo[2].info = this.viewInfo.attr4 +" point";

        return itemInfo;
      }
    },
    methods:{

       }
    }
</script>

当我从服务器获取数据并将一些 attr 值添加到 viewInfo. 子组件可以更新直接值。计算值无法更新与父组件中道具数据的关系。

需要一些帮助。当我更新父组件“viewInfo”值时，如何更新计算项值。

Answer 1

当你直接用索引设置一个项目时，Vue 无法检测到变化，即this.itemInfo[0].info = this.viewInfo.attr2 +" point" 不是反应式的。

Vue.set对于上述情况，请改用：

// create a new item
var newItem = Object.assign({}, this.itemInfo[0], { info: this.viewInfo.attr2 +" point" })
// set the new item to the specific index
this.$set(this.itemInfo, 0, newItem)

您可以在此处阅读有关列表渲染注意事项的更多信息：