vue - 通过组件数组添加时属性不响应

Question

嘿我的代码看起来像这样：componentData: [   { name: TestPane, props: { data: this.cars }, id: 1 },   { name: TestPane, props: { data: this.persons }, id: 2 },]<div v-for="component in componentData" :key="component.id">   <component v-bind:is="component.name" v-bind="component.props">   </component></div>props 不是反应性的。当我在没有循环的情况下正常传递道具时，:data=cars它们是反应性的。但我需要在我的项目中循环传递它们。有任何想法吗？

Answer 1

除非您像这样定义数据，否则它会起作用：

data() {

  return {

    cars: [ ... ],

    persons: [ ... ],

    componentData: [

      { name: TestPane, props: { data: this.cars }, id: 1 },

      { name: TestPane, props: { data: this.persons }, id: 2 },

    ]

  }

}

this.cars并且this.persons在您定义 时不可访问componentData。使用计算来维持反应性：

new Vue({

  el: "#app",

  data() {

    return {

      cars: [ ... ],

      persons: [ ... ]

    }

  },

  computed: {

    componentData() {

      return [

        { name: TestPane, props: { data: this.cars }, id: 1 },

        { name: TestPane, props: { data: this.persons }, id: 2 },

      ]

    }

  }

});

编辑：这是一个演示

const TestPane = {

  template: `

    <div class="pane">

      {{ data }}

    </div>

  `,

  props: ['data']

}

/***** APP *****/

new Vue({

  el: "#app",

  data() {

    return {

      cars: ['honda', 'ferrari'],

      persons: ['Bob', 'Mary']

    }

  },

  computed: {

    componentData() {

        return [

        { name: TestPane, props: { data: this.cars }, id: 1 },

        { name: TestPane, props: { data: this.persons }, id: 2 },

      ]

    }

  }

});

.pane {

  padding: 12px;

  background: #dddddd;

  margin: 4px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div v-for="component in componentData" :key="component.id">

     <component v-bind:is="component.name" v-bind="component.props">

     </component>

  </div>

</div>