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

Question

首先：我使用了laravel spark以及带有spark的vue的给定设置。

我有一个＆＃34; home＆＃34;具有道具＆＃34; custom＆＃34;的组件。在定制中，有一个＆＃34;密码＆＃34;阵列。 （通过指令代码添加的条目，它被初始化为空）

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

Answer 1

您的Vue代码中存在很多错误。首先，你的组件在哪里被隔离，没有明确的父子关系。第二，组件范围内存在错误，你试图设置孩子父母的数据，你也试图设置道具的值，并且道具默认为只读，你应该编写一个setter函数或将它们更改为数据。最后，我无法理解为什么如果涉及方法和事件，您是否尝试使用指令？

无论如何，我改写了你的jsfiddle，我希望你能找到你需要的东西。链是Root＆gt;主页＆gt; PasswordList。并且数据在根目录中但在家中进行了修改，最后一个组件仅显示它。这里的关键是twoWay属性，否则你将无法通过属性修改数据。

以下是一段代码

主

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