在 v-for 中添加基于条件的 vue 组件

Question

我有一个格式类似于

的 JS 数组

[{type:'text', data: 'some text'},{type: 'image',  data: 'link/to/image'}]

对于 type 的不同值，我有不同的 vue 组件（<text-block>、<image-block>），我想使用 v-for 遍历这个数组，根据类型，创建合适的 vue 组件。

v-for 的示例显示多次创建相同的元素，如多次 <li>。有没有办法在 v-for?

中创建不同的元素

Answer 1

你可以只使用 v-if:

<div v-for="(loop, index) in loops" :key="index">
    <text-block v-if="loop.type === 'text'"></text-block>
    <image-block v-if="loop.type === 'image'"></image-block>
</div>

你也可以使用动态组件：

<div v-for="(loop, index) in loops" :key="index">
    <component :is="loop.type + '-block'"></component>
</div>

确保您已导入组件并在实例上定义它们。

Answer 2

你可以这样做，假设数组中有电影列表：

<div id="app">
<ul>
<li v-for="movie in movies">{{ movie }}</li>
</ul>
</div>
<script>

var app = new Vue({

el: '#app',
data: {
  movie: ['some movie 1', 'movie 2', 'idk movies man']
}

});

setTimeout(function() {
app.movies.push('random movie');

}, 2000);

</script>

在 v-for 中添加基于条件的 vue 组件

Adding vue components based on condition in v-for

javascript

vue.js