vue 如何给数组对象绑定事件?

方法

goToApp(row) {
      row.appIdNames.map((item) =>
        this.$router.push(`/app/info?id=${item.appId}&name=${item.appName}`)
      );
    },

row.appIdNames代表数组对象

利用map方法循环给每一项对象绑定点击事件,但是我上面写的虽然绑定上了,但是不管点击哪一项,都是将全部事件点击了一遍,

而没有实现点击谁显示谁,请问大佬们怎么做到这样

阅读 1.9k
2 个回答

??这跟绑定有啥关系,绑定的回调难道不是goToApp吗,map循环调用自然就都执行了

因为你的 map 方法直接执行 $router.push 了。
可以修改成这样。

<template>
  <ul>
    <li v-for="item in list" :key="item.appId">
      <a @click="gotoApp(item)>{{item.appName}}</a>
    </li>
  </ul>
</template>
<script>
export default {
  data(){
    return {
      list:[
        {
          "appId": 47,
          "appName": "撒大声地"
        },
        {
          "appId": 45,
          "appName": "车间爱仕达"
        }
      ]
    }
  },
  methods:{
    gotoApp(record){
      this.$router.push(`/app/info?id=${record.appId}&name=${record.appName}`);
    }  
  }
}

问题不在于绑定方法,而是你用错的。如果是 JSX 模板的话,可以类似成你这样使用:

render:(row)=>{
  return row.appIdNames.map(item=>(
    <router-link to={`/app/info?id=${item.appId}&name=${item.appName}`}>
      {item.appName}
    </router-link>
  ))
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题