javascript - 如何在 NuxtJS 中动态创建卡片
问题描述
我是 NuxtJS 的新手,我想知道如何通过 v-对话框创建 v-card。
例如,我创建了一个添加按钮,然后打开了一个 v-dialog,然后我填写了表格,然后我“提交”,最后创建了一个包含我之前填写的内容的 v-card。
谢谢您的帮助。
解决方案
我认为这将解决您的问题:
在你的脚本中:
data() {
return {
formInfo: {
title: '',
description: ''
}
}
},
methods: {
onSubmit() {
let container = document.getElementById('card-container');
this.formInfo.forEach((result, i) => {
// Create card element
let card = document.createElement('v-card');
card.classList = 'you'r classes';
// Construct card content
const content = `
<div class="card">
<div class="card-header" id="heading-{i}">
<h5 class="mb-0">
<button class="btn btn-link">
</button>
</h5>
</div>
<div id="collapse-{i}" class="collapse show">
<div class="card-body">
<h5>{result.title}</h5>
<p>{result.description}</p>
</div>
</div>
</div>
`;
// Append newly created card element to the container
container.innerHTML += content;
})
}
}
推荐阅读
- webview2 - WebView2:导航到第二页导致远程信使错误
- r - 为什么 RDS 文件不同(如果它们应该相同)?
- azure - 集中管理的 Azure 管道
- excel - 用户窗体显示多行的值
- python - 为什么我在 Python 中使用 pandas 和请求将重复项添加到我的多线程处理列表中?
- .net - Powershell Get-Clipboard 编码
- javascript - 反应:onChange 回调未触发
- bluetooth-lowenergy - 将三星蓝牙智能遥控器 (2016) 连接到 RaspberryPi 蓝牙(零 W)
- r - 如何在 R 中创建自己的摘要
- javascript - 无法将视频从网页流式传输到 python 服务器起诉 python 服务器中的 flask-socketio 和 java 脚本中的 socetio