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

У меня есть эта строка 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 не запускается. Мне нужно решение для этого, пожалуйста.

Строки недостаточно, также укажите свой код.

Vladislav Ladicky 31.10.2018 14:09

Сейчас редактировал, спасибо.

Yaman Ktish 31.10.2018 15:45

Хорошо, я ответил на твой вопрос. Дайте мне знать, если это достаточно хорошо.

Vladislav Ladicky 31.10.2018 16:15
0
3
719
2

Ответы 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>

проблема в том, что строка не всегда будет одинаковой. есть функция, которая выдает строку, поэтому я хочу использовать v-html. спасибо за Ваш ответ

Yaman Ktish 31.10.2018 16:21

Может это поможет:

<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. спасибо за Ваш ответ

Yaman Ktish 31.10.2018 16:19

Понимать. А просто текст будет отличаться? Или метод обратного вызова тоже? Будут ли разные обратные вызовы для разных текстов?

Vladislav Ladicky 31.10.2018 16:23

метод обратного вызова также изменится.

Yaman Ktish 31.10.2018 16:24

Отредактировано. Теперь то, что вы ищете?

Vladislav Ladicky 31.10.2018 17:13

Другие вопросы по теме