vue.js当从指令

Question

更改数据时，列表（模板）绑定不会更新首先：我使用laravel spark和给定的带有spark的vue设置。

我有一个“自定义”道具的“家”组件。在自定义内有一个“密码”数组。 （由指令代码添加的条目，它的初始化空）

我的组件（ALIST）应该对数据绑定

<template id="passwords-list-template"> 
    <div class="password" v-for="password in list"> 
     <ul> 
      <li>{{ password.name }}</li> 
      <li>{{ password.description }}</li> 
     </ul> 
    </div> 
</template> 

<script> 
export default { 
    template: '#passwords-list-template', 

    props: ['list'], 
}; 
</script> 

使用

<passwords-list :list="custom.passwords"></passwords-list> 

使用VUE devtools我可以看到我的数据正在更新，但是我的列表不是。另外，其它像绑定

<div v-show="custom.passwords.length > 0"> 

不工作...

UPDATE：父组件（首页）

Vue.component('home', { 
    props: ['user', 'custom'], 

    ready : function() { 

    } 
}); 

使用

<home :user="user" :custom="spark.custom" inline-template> 

更新2：我周围玩一点点使用jsfiddle。看起来像使用$ root改变绑定数据对象在使用组件的方法时对我很好。但是它不工作时，试图用一个指令

https://jsfiddle.net/wa21yho2/1/

Answer 1

有在Vue公司的代码有很多错误的访问。首先，你的组件在哪里是孤立的，没有明确的父 - 子关系。第二，组件范围中存在错误，你试图在子组中设置父项的数据，并且你试图设置一个道具的价值，道具默认只读，你应该写一个setter函数或将它们改为数据。最后，我不明白为什么你要使用一个指令，如果有方法和事件涉及？

无论如何，我重写了你的jsfiddle，我希望你找到你需要的东西。链是根>首页>密码列表。数据在根目录下，但在家中进行了修改，最后一个组件只显示它。这里的关键是双向属性，否则你将无法通过属性修改数据。

下面是一个代码片段

首页

var Home = Vue.component('home', { 
    props: { 
     user: { 
     default: '' 
     }, 
     custom: { 
     twoWay: true 
     } 
    }, 
    components: { 
     passwordList: PasswordList 
    }, 
    methods: { 
     reset: function() { 
     this.custom.passwords = []; 
     } 
    } 
}); 

// template 
<home :custom.sync="spark.custom" inline-template> 
    {{custom | json}} 
    <button @click="reset"> 
    reset in home 
    </button> 
    <password-list :list="custom.passwords"></password-list> 

    <password-list :list="custom.passwords"></password-list> 
</home> 

以下是完整的如何定义jsfiddle