V-for与模板

Question

我用的是vue-引导。我试图创建一个动态的网格组件来获取标题和数据。因为我们不知道有多少列传递给组件，所以我们应该检查传递的每一项。

<template>
    <b-table striped hover :items="items"></b-table>
        <div v-for="title in items">
          <template slot="title.key" slot-scope="data">
            <input v-if="title.isActive" type="text" v-model="data.value">
            <textarea v-else type="text" v-model="data.value"></textarea>
          </template>
        </div>
   </b-table>
</template>

<script>
const items =[
      {'label': 'Description', 'key': 'description'},
      {'label': 'Name',  'key': 'name', 'isActive': true},
    ]

因此，如果isActive是真的，那么这个模板应该是textarea (列应该用then区域而不是输入来更改)，但是它不起作用，没有列既不改变inputbox，也不改变then区域，并且保持默认模板。

你能帮我解决这个问题吗。

谢谢

Answer 1

我认为您应该在v-for和时隙范围变量中分离title，以避免混淆：

<template v-for="title in items" :key="title.key">
  <template :slot="title.key" slot-scope="item">
    <input v-if="item.isActive" type="text" v-model="item.value">
    <textarea v-else type="text" v-model="item.value"></textarea>
  </template>
</template>

Answer 2

由于isActive属性存在于items数组中的对象中，因此需要作为迭代器的属性访问它。

因此，代码变成：

<div v-for="title in items">
  <template slot="{{title.key}}" slot-scope="{title}">
    <input v-if="title.isActive" type="text" v-model="title.value">
    <textarea v-else type="text" v-model="title.value"></textarea>

  </template>
</div>

Answer 3

多亏了它的回答，经过小小的修改后，下面的方法就开始工作了。

<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>

谢谢你们所有人。