Question

我有一个像这样的组件：

  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 =“ navitems中的项目” v-bind：navitem =“ item”：key =“ item.id”

，以便每个列表项都获得相应的事件侦听器，最终呈现的列表项将如下所示：

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

如果可能的话该怎么办？

Answer 1

请记住，您正在将字符串传递给组件，而不是函数引用。要调用该函数，只需在组件对象中查找该函数，然后对其进行调用，即可从该组件中“选择”该函数。

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

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

1 个答案: