首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vuejs v-on click在组件内不起作用

Vuejs v-on click在组件内不起作用
EN

Stack Overflow用户
提问于 2018-10-23 03:07:15
回答 1查看 1.9K关注 0票数 1

我使用VueJs并用它创建了以下组件。

代码语言:javascript
复制
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代码

代码语言:javascript
复制
<div id="app">
    <component-test :list="list" :symbole="symbole"></component-test>
</div>

当我单击"li“标记中的"span”标记时,没有附加任何内容。

我没有任何警告和错误。

如何在单击"span“标记时调用组件方法"test”。

这种情况下如何实现click事件。

EN

回答 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!推荐这样做。当您销毁组件或列表更改时,您必须同时删除这些事件处理程序,否则会造成内存泄漏。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52936204

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档