我正在尝试将通过单击按钮发送到组件的道具数据更新为vue
中的单个组件。
单击按钮可触发操作,以从配置加载数据。但这会引发错误,并且错误消息不明确。在https://imgur.com/a/0psUWKr
中找到错误如果我直接进行数据传递而没有按钮动作,则可以正常工作。
我的主要组件
<template>
<div>
<MyList v-if="listItems" :elements="listItems"/>
<button @click="showSlider">Show Slider</button>
</div>
</template>
<script>
// imports the components and config files
export default {
name: "ListView",
data() {
return {
listItems: []
};
},
components: {
MyList
},
methods: {
showSlider: function() {
this.listItems.push(configs['elements'])
},
</script>
注意:如果我默认情况下将数据提供给listItems
,则可以正常运行
还有MyList
文件
<template>
<ul>
<li v-for="each in elements" :key="each.id">
{{each.name}}
</li>
</ul>
<template>
<script>
// imports the components and config files
export default {
name: "MyList",
props: {
elements: {
type: Array
}
}
</script>
答案 0 :(得分:0)
一般来说,它应该可以工作。但就我而言,问题在于以下功能中的push
。
showSlider: function() {
this.listItems.push(configs['elements'])
},
从Vuex
存储相同内容,并使用调度程序来更新相同内容,例如超级按钮。然后我使用计算属性从vueX
加载状态并将其传递给 MyList