Vuejs v-on click doesn't work inside component

Question

I use VueJs and I create the following component with it.

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: '@'
    },
});

and this my html code

<div id="app">
    <component-test :list="list" :symbole="symbole"></component-test>
</div>

When I click on the "span" tag inside "li" tag, nothing append.

I don't have any warnings and any errors.

How I can call my component method "test" when I click in the "span" tag.

How implement click event for this case.

If you inspect the generated html, I expect that you see a literal v-on:click attribute on your span element, right? — Sumurai8
– Sumurai8, Commented Oct 22, 2018 at 19:12
Vue does not interpret your dynamically created span tags. You could either use pure javascript or you programmatically render a Vue component into the span tag, which fires a click event. — Cepheus
– Cepheus, Commented Oct 22, 2018 at 19:17
"you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition." (source). You also can check this answer — Sovalina
– Sovalina, Commented Oct 22, 2018 at 19:21

Sumurai8 · Accepted Answer · 2018-10-22 19:37:42Z

1

You cannot use vue directives in strings that you feed to v-html. They are not interpreted, and instead end up as actual attributes. You have several options:

Prepare your data better, so you can use normal templates. You would, for example, prepare your data as an object: { linkText: '---', position: 'before', name: 'name1' }, then render it based on position. I think this is by far the nicest solution.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in preparedList" :key="index">
        <template v-if="item.position === 'before'">
          <span v-on:click="test">{{ item.linkText }}</span>
          {{ item.name }}
        </template>
        <template v-else-if="item.position === 'after'">
          {{ item.name }}
          <span v-on:click="test">{{ item.linkText }}</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "symbole"],

  computed: {
    preparedList() {
      return this.list.map(item => this.replaceSymbole(item.name));
    }
  },

  methods: {
    replaceSymbole: function(question) {
      if (question.indexOf("@") === 0) {
        return {
          linkText: "---",
          position: "before",
          name: question.replace("@", "").trim()
        };
      } else {
        return {
          linkText: "---",
          position: "after",
          name: question.replace("@", "").trim()
        };
      }
    },

    test: function(event) {
      console.log("Test ...");
      console.log(this.$el);
    }
  }
};
</script>

You can put the click handler on the surrounding li, and filter the event. The first argument to your click handler is the MouseEvent that was fired.

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" v-on:click="clickHandler"
          v-html="replaceSymbole(item.name)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "symbole"],

  data() {
    return {
      regexSymbole: new RegExp(this.symbole)
    };
  },

  computed: {
    preparedList() {
      return this.list.map(item => this.replaceSymbole(item.name));
    }
  },

  methods: {
    replaceSymbole: function(name) {
      return name.replace(
        this.regexSymbole,
        '<span class="clickable-area">---</span>'
      );
    },

    test: function(event) {
      console.log("Test ...");
      console.log(this.$el);
    },

    clickHandler(event) {
      const classes = event.srcElement.className.split(" ");

      // Not something you do not want to trigger the event on
      if (classes.indexOf("clickable-area") === -1) {
        return;
      }

      // Here we can call test
      this.test(event);
    }
  }
};
</script>

Your last option is to manually add event handlers to your spans. I do not!!! recommend this. You must also remove these event handlers when you destroy the component or when the list changes, or you will create a memory leak.

answered Oct 22, 2018 at 19:37

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wpuser000 Over a year ago

thx for your answer, I can't prepare data better because my name string can contains many symboles , and yes I can't use v-html for this case so I will do in pure js.

Sumurai8 Over a year ago

@wpuser000 I don't understand that. The second option uses v-html and has the behaviour you expect...

wpuser000 Over a year ago

I try this before <li v-for="item in list">{{ replaceSymbole(item.name) }}</li> but it render in html "---name" so I read the doc and I found this v-html, but I don't read well the doc because I can't use this directive for what I have tried to achieve, i just want replace all symbole with span with click listener. ex: {name:"@ big name @ with many symboles @ "} => big name with many symbole "

Collectives™ on Stack Overflow

Vuejs v-on click doesn't work inside component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related