Vuejs - запустить @click при использовании v-html для возврата строки html?

Question

У меня есть HTML-строка:

errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>';

Я хочу добавить его в этот div:

<div v-if="hasIssue !== {} && issue.is_issue" v-for="(issue, key) in hasIssue" :key="key" class="issues" v-html="errorText"></div>

когда я использую v-html, чтобы вернуть его, я вижу кнопку, но @click не запускается. Мне нужно решение для этого, пожалуйста.

Answer 1

Может быть, это поможет:

<div
  v-if="hasIssue !== {} && issue.is_issue"
  v-for="(issue, key) in hasIssue"
  :key="key"
  class="issues"
  v-html="errorText"
  @click="processIssue(issue)"
>
</div>

data: {
  hasIssue: [],
  errorText: `
    <button class="button">
      Enable exceedable limits
    </button>
  `
},

methods: {
  processIssue (issue) {
    this.enableExceedable(issue.mapping)
  },
  enableExceedable (mapping) {
    // implementation
  }
}

PS: я использую кнопку вместо якоря. Используйте якоря только тогда, когда они действительно станут якорями, а не просто кнопками. Лучшая семантика. Рекомендуемый способ.

Answer 2

Вы используете v-html неправильно. Вы должны добавить

<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>

внутри вашего div

<div v-if="hasIssue !== {} && issue.is_issue" v-for="(issue, key) in hasIssue" :key="key" class="issues">
  <a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>
</div>