Vuejs v-on click在组件内不起作用
我使用VueJs并用它创建了以下组件。
var ComponentTest = {
props: ['list', 'symbole'],
data: function(){
return {
regexSymbole: new RegExp(this.symbole),
}
},
template: `
<div>
<ul>
<li v-for="item in list"
v-html="replaceSymbole(item.name)">
</li>
</ul>
</div>
`,
methods: {
replaceSymbole: function(name){
return name.replace(this.regexSymbole, '<span v-on:click="test">---</span>');
},
test: function(event){
console.log('Test ...');
console.log(this.$el);
},
}
};
var app = new Vue({
el: '#app',
components: {
'component-test': ComponentTest,
},
data: {
list: [{"id":1,"name":"@ name1"},{"id":2,"name":"@ name2"},{"id":3,"name":"@ name3"}],
symbole: '@'
},
});这是我的html代码
<div id="app">
<component-test :list="list" :symbole="symbole"></component-test>
</div>当我单击"li“标记中的"span”标记时，没有附加任何内容。
我没有任何警告和错误。
如何在单击"span“标记时调用组件方法"test”。
这种情况下如何实现click事件。
回答 1
Stack Overflow用户
发布于 2018-10-23 03:37:42
不能在提供给v-html的字符串中使用vue指令。它们不会被解释，而是作为实际的属性结束。您有几个选项：
- 可以更好地准备数据，因此您可以使用普通模板。例如，您可以将数据准备为object：
{ linkText: '---', position: 'before', name: 'name1' }，然后根据位置呈现它。我认为这是目前为止最好的解决方案。
{{ item.linkText }} {{ item.name }} {{ item.name }} {{ item.linkText }}导出默认值{ props："list"，"symbole"，computed：{ preparedList() { return this.list.map(item => this.replaceSymbole(item.name))；} }，方法：{ replaceSymbole:函数(问题){ if (question.indexOf("@") === 0) { return { linkText：“-”，位置：“之前”，名称: question.replace("@"，"").trim() }；} else { return { linkText：“-”，position："after"，名称: question.replace("@"，"").trim() }；} }，test: function(event) {console.log(“Test...”)；console.log(this.$el)；}；
- 您可以将单击处理程序放在周围的li上，并过滤事件。单击处理程序的第一个参数是触发的
MouseEvent。
导出默认值{ props："list"，"symbole"，data() { return { regexSymbole: new RegExp(this.symbole) }；}，computed：{ preparedList() { return this.list.map(item => this.replaceSymbole(item.name))；}，方法：{ replaceSymbole: function(name) { return name.replace( this.regexSymbole，‘-’)；}，test: function(event) {console.log(“Test... ")；console.log(this.$el)；}，clickHandler(event) { const classes = event.srcElement.className.split(”“)；//不是您不希望在if (classes.indexOf("clickable-area") === -1) { return；} //此处我们可以调用test this.test( event )；}上触发事件。
- 您的最后一个选择是手动向跨度添加事件处理程序。I do not！推荐这样做。当您销毁组件或列表更改时，您必须同时删除这些事件处理程序，否则会造成内存泄漏。
https://stackoverflow.com/questions/52936204
复制相似问题
腾讯云开发者
