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>

topView.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>

当我从服务器获取数据并向 viewInfo 添加一些属性值时。子组件可以直接更新 value.the 计算值无法更新与来自父组件的道具数据的关系。

需要一些 help.how 我可以在更新父组件 "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)

您可以阅读有关 List Rendering Caveats here 的更多信息：

weex 数据变化更新到子组件

weex data change to update to child component

components

vue.js

weex