vue.js - V-for 带模板
问题描述
我正在使用 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 都没有更改,并保持默认模板
你能帮忙解决这些问题吗?
谢谢
解决方案
我认为您应该将title
v-for 和 slot-scope 变量分开以避免混淆:
<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>
推荐阅读
- node.js - 如何在mongodb中添加多个相同类型的文档
- text-classification - 使用 fastText 句子向量作为输入特征
- amazon-web-services - 在 aws sagemaker notebook 上下载 kaggle 包
- typescript - 使用 [key: string] 时的打字稿编译错误
- sql - 将两个选择的结果计算到一个新的选择中
- javascript - nodejs中的POST数据处理
- java - Java:为什么未关闭的流不会抛出异常?
- python - 要使用多少个双向 lstm 层,多少层太多?关于非常不平衡的数据集的任何建议?
- php - Laravel 策略在测试中的工作方式不同
- android - 如何对 Room 的数据进行分类?