从指令更改数据时，vue.js 列表（模板）绑定不更新答案

【问题标题】：vue.js list ( template ) binding not updating when changing data from directive从指令更改数据时，vue.js 列表（模板）绑定不更新
【发布时间】：2016-09-29 00:39:19
【问题描述】：

首先：我使用的是 laravel spark 和 spark 自带的 vue 设置。

我有一个带有“custom”属性的“home”组件。在自定义中有一个“密码”数组。（指令代码添加的入口，初始化为空）

我的组件（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">

没有工作...

更新：父组件（主页）

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

    ready : function() {

    }
});

用法

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

更新 2：我使用 jsfiddle 玩了一下。在使用组件的方法时，使用 $root 更改绑定的数据对象似乎对我来说很好。但是，当尝试使用指令访问它时它不起作用

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

【问题讨论】：

父组件中的数据是如何定义的？
它只被定义为一个道具
list 是passwords-list 的一个prop，而password-list 是定义在其他组件内部的一个组件，我需要查看那个顶级组件。我真正想看到的是custom.passwords的定义@
我会在一秒钟内添加它
添加到问题中

标签： javascript laravel vue.js laravel-spark

【解决方案1】：

您的 Vue 代码中有很多错误。首先，你的组件是孤立的，没有明确的父子关系。其次，组件的范围有错误，你试图在孩子中设置父级的数据，你也试图设置一个 prop 的值，props 默认是只读的，你应该写一个 setter 函数或者把它们改成数据。最后，如果涉及方法和事件，我不明白您为什么要尝试使用指令？

无论如何，我重写了你的 jsfiddle，我希望你在那里找到你需要的东西。链是 Root > Home > PasswordList。并且数据在根目录但在home修改，最后一个组件只显示它。这里的关键是twoWay属性，否则无法通过属性修改数据。

这是一段sn-p代码

首页

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

【讨论】：