javascript - 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>

道具不是反应性的。当我在没有循环的情况下正常传递道具时，:data=cars它们是反应性的。但我需要为我的项目循环传递它们。有任何想法吗？

标签： javascriptvue.js

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>