Как визуализировать массив HTML-кода в Vue.js

Question

Я хочу вставить newUsers в массив и затем отобразить этот массив, newUsers будет HTML-кодом с информацией, и всякий раз, когда кто-то вводит его информацию и нажимает кнопку «Добавить», HTML-код будет помещаться в массив пользователей,но проблема в том, что v-html не читает код, вероятно, потому что, когда я исправляю код вручную, я получаю другие результаты отображения: https://codesandbox.io/s/3r3po83rkp

Answer 1

я думаю, что вы вернетесь сюда и спросите, что когда вы нажимаете удалить и закрыть , вы не оказываете никакого влияния, я предлагаю сделать это лучше, например:

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>        

, чек , это

Answer 2

Проблема с вашим 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>