我使用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事件。
https://stackoverflow.com/questions/52936204
复制相似问题