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

Question

我使用 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”。

本案例如何实现点击事件。

Answer 1

您不能在提供给v-html 的字符串中使用 vue 指令。它们不会被解释，而是最终成为实际属性。您有多种选择：

• 更好地准备您的数据，以便您可以使用普通模板。例如，您可以将数据准备为对象：{ linkText: '---', position: 'before', name: 'name1' }，然后根据位置进行渲染。我认为这是迄今为止最好的解决方案。

  <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>
  

• 您可以将点击处理程序放在周围的li上，并过滤事件。点击处理程序的第一个参数是被触发的MouseEvent。

  <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>
  

• 您的最后一个选择是手动将事件处理程序添加到您的跨度。我确实不！！！推荐这个。您还必须在销毁组件或列表更改时删除这些事件处理程序，否则会造成内存泄漏。