如何在 NuxtJS 中动态创建卡片

Question

我是 NuxtJS 的新手，我想知道如何通过 v-dialog 创建 v-card。

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

感谢您的帮助。

Answer 1

我认为这将解决您的问题：

在你的脚本中：

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