vue - 通过组件数组添加时属性不反应答案

【问题标题】：vue - property not reactive when added via component arrayvue - 通过组件数组添加时属性不反应
【发布时间】：2020-11-13 13:52:25
【问题描述】：

嘿，我的代码如下所示：

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 循环的情况下正常传递道具时，它们是反应性的。但我需要为我的项目循环传递它们。有什么想法吗？

【问题讨论】：

你刚刚写了v-bind，就像写:="component.props"一样，没有意义。你需要写你想要传递的东西，比如v-bind:data
假设componentData 与cars 和persons 在同一个data 块中定义，这就是问题所在。它们在您定义 componentData 时将不存在，即使它们在上面列出。（v-bind 语法 is valid。）
你能添加到你的TestPane这个：created(){console.log(this.data);}吗？
如果@Dan 是对的，你可以查看这个答案stackoverflow.com/questions/49614837/…
Ifaruki v-bind 是有效的，就像 Dan 链接的文档所说的那样。 @Dan 是的，你是对的。我的问题有解决方案吗？

标签： javascript vue.js

【解决方案1】：

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

data() {
  return {
    cars: [ ... ],
    persons: [ ... ],
    componentData: [
      { name: TestPane, props: { data: this.cars }, id: 1 },
      { name: TestPane, props: { data: this.persons }, id: 2 },
    ]
  }
}

当您定义 componentData 时，this.cars 和 this.persons 不可访问。使用计算来保持反应性：

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>

【讨论】：

嘿，我在您编辑时尝试了您所有的解决方案：D 您的解决方案正在工作，除了初始加载。我在那里收到多条未定义的消息，但之后它工作正常。如何使用 null 启动计算数据，以便执行 v-if？
哈，在第一个版本没有反应后我改变了主意。如果您正在异步加载数据，您可以用v-if 包裹v-for 直到它到达（最好），或者您可以在计算中执行data: this.cars || [] 和data: this.persons || [] 之类的操作。
我通过挂载钩子中的 api 调用加载数据。所以是的，我想在整个组件数组上使用 v-if。但是怎么做？在您的“编辑前”解决方案中，我可以使用“v-if="componentData"，因为它最初为空。
这通常使用您创建的v-if="isLoaded" 数据属性来完成，该属性以false 开头，并在异步操作完成时设置为true