如何在 Vue.js 中渲染一組 html 代碼

Question

我想將newUsers推newUsers一個數組中，然后顯示該數組， newUsers將是一個帶有信息的 html 代碼，每當有人輸入他的信息並單擊“添加”時，一個 html 代碼將被推送到用戶數組中，但問題是 'v -html' 沒有讀取代碼可能是因為當我手動糾正代碼時，我得到了不同的顯示結果，請查看： https : //codesandbox.io/s/3r3po83rkp

Answer 1

v-html的問題是您試圖顯示數組本身而不是其中的項目。

更改此：

<div class="req"><span v-html="Users"></span></div>

至：

<div class="req" v-for="(user, index) in Users"><span :key="index" v-html="user"></span></div>

Answer 2

我想您會回到這里，並要求當您單擊刪除並關閉時沒有任何作用，我建議這樣做更好：

Add(e) {
  this.Users.push({
    Description: this.Description,
    Severity: this.Severity,
    Assigned: this.Assigned
  });
  e.preventDefault();
}

在您的模板中：

    <div class="req" v-for="(user, index) in Users">
    <form>
      <h1>{{ user.Description }}</h1>
      <p><i class="far fa-clock"></i> {{ user.Severity }}</p>
      <p><i class="fas fa-user"></i> {{ user.Assigned }}</p>
      <button class="btn btn-Danger">Delete</button>
      <button class="btn btn-warning">Close</button>
    </form>
  </div>        

檢查這個