0

首先：我正在使用 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">

没有工作...

更新：父组件（主页）

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

    ready : function() {

    }
});

用法

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

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

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

4

1 回答 1

1

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

无论如何，我重写了你的 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

于 2016-05-31T14:58:13.053 回答