0

我正在尝试将单击按钮时发送到组件的道具数据更新为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>
4

1 回答 1

0

一般来说,它应该可以工作。但就我而言,问题在于push以下功能。

 showSlider: function() {
     this.listItems.push(configs['elements'])
},

存储相同的Vuex内容并使用调度程序更新相同的作品就像一个魅力。我使用计算属性从 加载状态vueX并将其传递给MyList

于 2019-11-11T13:23:49.920 回答