[Vuejs]-Vuejs- run @click when using v-html to return html string?

0👍

You are using v-html in wrong way. You should add

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

inside your 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>

0👍

Maybe this will help:

<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: I’m using button instead of anchor. Use anchors only when they will really act as anchors, not just buttons. Better semantics. Recommended way.

Leave a comment