我使用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事件。
发布于 2018-10-23 03:37:42
不能在提供给v-html
的字符串中使用vue指令。它们不会被解释,而是作为实际的属性结束。您有几个选项:
{ 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);};
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 );}上触发事件。
https://stackoverflow.com/questions/52936204
复制相似问题