Vuejs-使用v-html返回html字符串时运行@click？答案

【问题标题】：Vuejs- run @click when using v-html to return html string?Vuejs-使用v-html返回html字符串时运行@click？
【发布时间】：2019-04-04 15:48:30
【问题描述】：

我有这个 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 没有运行。我需要一个解决方案。

【问题讨论】：

字符串不够，也提供你的代码。
我现在编辑了，谢谢。
好的，我回答了你的问题。让我知道它是否足够好。

标签： javascript html vue.js onclick render

【解决方案1】：

您以错误的方式使用 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>

【讨论】：

问题是字符串总是不一样的。有一个提供字符串的函数，因为我想使用 v-html。谢谢你的回答

【解决方案2】：

也许这会有所帮助：

<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：我使用的是按钮而不是锚点。仅当它们真正充当锚时才使用锚，而不仅仅是按钮。更好的语义。推荐方式。

【讨论】：

问题是字符串总是不一样的。有一个给出字符串的函数，因为我想使用 v-html。谢谢你的回答
明白。只是文字会有所不同吗？还是回调方法？不同的文字会有不同的回调吗？
回调方法也会改变。
已编辑。现在是你在寻找什么？