代码之家 › 专栏 › 技术社区 › Alan Omar

如何在Vue组件中的每个列表项上附加事件侦听器?

vue.js javascript

0

Alan Omar · 技术社区 · 7 年前

我有这样一个组件:

  Vue.component('navbar', {
  props: ['navitem'],
  methods: {
    users: function () {
        //users code
    },

    test:function(){
    }
  },
  template: '<li v-on:click="navitem.name"> {{navitem.name}} </li>'
  });

navitems: [{ id: 1, name: 'users' }, { id: 2, name: 'test' }]

v-for=“导航项中的项”v-绑定:navitem=“项”:键=“项目id"

即最终呈现的列表项如下所示:

  <li v-on:click="users()"></li> 
  <li v-on:click="test()"></li>

1 回复 | 直到 7 年前

1

2

Sumurai8 7 年前

请记住,您是在向组件传递字符串,而不是函数引用。要调用函数,只需从组件中“选择”函数,方法是在组件对象中查找该函数,然后调用它。

Vue.component('navbar', {
  props: ['navitem'],
  methods: {
    users: function () {
        //users code
    },

    test:function(){
    },

    clickHandler(name) {
      this[name]();
    }
  },
  template: '<li v-on:click="clickHandler(navitem.name)"> {{navitem.name}} </li>'
});