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

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

vue.js javascript

Alan Omar · 技术社区 · 8 年前

我有这样一个组件:

  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 回复 | 直到 8 年前

Sumurai8 8 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前