我在Vue组件中使用Clusterize.js插件。该插件需要一个模板数组来呈现列表。对于前。 ['<li>...</li>', '<li>...</li>']
。
问题是:我在这些<li>
元素内有一个复选框,我需要监听@change
上的<input type="checkbox"
事件,但是我将这些输入像字符串一样呈现,所以我无法定义{ {1}}回调。
@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
},
不起作用,因为它只是一个字符串,而不是指令。