javascript - 从指令更改数据时，vue.js 列表(模板)绑定(bind)不会更新

Question

首先:我正在使用 Laravel Spark 以及 Spark 附带的 vue 的给定设置。

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

我的组件(alist)应该与数据绑定(bind)

<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 我可以看到我的数据正在更新，但我的列表没有更新。还有其他绑定(bind)，例如

<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 更改绑定(bind)数据对象似乎对我来说效果很好。但是，当尝试使用指令访问它时，它不起作用

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

Answer 1

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

无论如何，我重写了你的jsfiddle，我希望你能在那里找到你需要的东西。该链是“Root”>“Home”>“PasswordList”。数据位于根目录中，但在 home 中进行了修改，最后一个组件仅显示它。这里的关键是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