V-for 带模板答案

【问题标题】：V-for with templateV-for 带模板
【发布时间】：2019-04-22 12:17:46
【问题描述】：

我正在使用 vue-bootstrap。我尝试创建一个动态的网格组件来获取标题和数据。由于我们不知道传递给组件的列数，我们应该检查传递的每一项。

<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（应使用 textarea 而不是 input 更改列）但是它不起作用，并且输入框和 textarea 均未更改任何列并保持默认模板

请您帮忙解答一下这些问题。

谢谢

【问题讨论】：

items 应该在您的data 中。而且你不应该在你的属性中使用胡须。
我用过
你能提供一个jsfiddle吗？
应该是title.isActive
试试<template :slot="title.key"...

标签： vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

你必须使用下面的sn-p。

<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我认为你应该在 v-for 和 slot-scope 变量中分开 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>

【讨论】：

我的错，经过轻微修改后它可以工作。非常感谢！

【解决方案4】：

感谢ittus的回答，经过以下方式的小修改后。

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

谢谢大家。

【讨论】：

【解决方案5】：

您可以查看this example 的动态列。

new Vue({
  el: "#app",
  data: {
    fields: [{
      key: "id",
      label: "Id",
      colType: "span"
    }, {
      key: "name",
      label: "Name",
      colType: "button"
    }, {
      key: "uhh",
      label: "uhh..",
      colType: "idk"
    }],
    items: [{
      id: 0,
      name: "Test 0"
    }, {
      id: 1,
      name: "Test 1"
    }, {
      id: 2,
      name: "Test 2"
    }]
  }
});

<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
      <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
      </div>
      <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
      </div>
      <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
      </div>
    </template>
  </b-table>
</div>

【讨论】：