Как передать директиву Vue внутри строки? - PullRequest
Новая
       13

Как передать директиву Vue внутри строки?

0 голосов
/ 11 апреля 2019

Я использую плагин Clusterize.js внутри моего компонента Vue.Этот плагин требует массив шаблонов для отображения списка.Например['<li>...</li>', '<li>...</li>'].Проблема в том, что у меня есть флажок внутри этих <li> элементов, и мне нужно прослушивать событие @change для <input type="checkbox" Но я отображаю эти входные данные как строку, поэтому я просто не могу определить @change обратный вызов. 

<template>
  <div :id='scrollId' class='clusterize-scroll'>
    <ul :id='contentId' class='clusterize-content checkbox-list'>
      <li class='clusterize-no-data'>Loading data…</li>
    </ul>
  </div>
</template>

Метод для генерации массива, подобный ['<li>...</li>', '<li>...</li>']

    getListItemsTemplate () {
      let templates = []
      for (let i = 0; i < this.list.length; i += 1) {
        let item = this.list[i]
        let itemTemplate = `
        <li>
          <label class="custom-checkbox">
            <input
              type="checkbox"
              id="${item.doc_count}"
              value="${item.value}"
              ${this.isInStore(item.value)}
              @change="clickCheckbox"
            >
            <span class="fake-input"></span>
            <span class="fake-label">${item.value}</span>
          </label>
        </li>`
        templates.push(itemTemplate)
      }
      return templates
    },

@change="clickCheckbox" не работает, потому что это просто строка, но не директива.

...