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

Question

首先：我正在使用 laravel spark 和 spark 附带的给定 vue 设置。

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

我的组件（列表）应该与数据绑定

<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 代码中有很多错误。首先，您的组件是孤立的，没有明确的父子关系 relationship.Second，组件范围存在错误，您试图在子对象中设置父对象的数据，而且，您是试图设置一个道具的值，而道具默认是只读的，你应该写一个 setter 函数或将它们更改为数据。最后，如果涉及方法和事件，我不明白你为什么要尝试使用指令？

无论如何，我重写了你的jsfiddle，我希望你能在那里找到你需要的东西。该链是 Root > Home > 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

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

vue.js list ( template ) binding not updating when changing data from directive

javascript

laravel

vue.js

laravel-spark