带模板的 V-for

Question

我正在使用 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 更改列）但是它不起作用，并且没有任何列更改 inputbox 和 textarea 并保留默认模板

你能帮忙解决这些问题吗？

谢谢

原文由 Can Cinar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为你应该在 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>

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我没有得到这些答案。这实际上帮助了我，是这样的：

https://forum.vuejs.org/t/how-to-pass-cell-templates-to-a-component-with-b-table/106283

和这个小提琴： https ://jsfiddle.net/skirtle/6of9dnpz/

   toCellName (slot) {
      return `cell(${slot})`
    }

关键是 toCellName 返回正确的插槽名称。

原文由 Jannunen 发布，翻译遵循 CC BY-SA 4.0 许可协议