Javascript 如何在NuxtJS中创建动态卡

我是NuxtJS的新手，我想知道如何通过v对话框创建v卡

例如，我创建一个添加按钮，然后打开一个v对话框，然后填写表单，然后“提交”，最后创建一个v卡，其中包含我之前填写的内容

---

谢谢你的帮助。

我想这会解决你的问题：

在您的脚本中：

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;
})
   }
}

data（）{
返回{
formInfo：{
标题：“”，
说明：“”
}
}
},
方法：{
onSubmit（）{
let container=document.getElementById（'card-container'）；
this.formInfo.forEach（（结果，i）=>{
//创建卡片元素
让card=document.createElement（'v-card'）；
card.classList='your'r classes'；
//构建卡片内容
常量内容=`
{result.title}
{result.description}

`;
//将新创建的卡片元素附加到容器中
container.innerHTML+=内容；
})
}
}