首先:我正在使用 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)数据对象似乎对我来说效果很好。但是,当尝试使用指令访问它时,它不起作用
最佳答案
您的 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
关于javascript - 从指令更改数据时,vue.js 列表(模板)绑定(bind)不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37538265/