map内绑定方法如何互不影响？

Question

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

这样写map内路由方法，在页面上点击时数组项直接显示数组中最后一项方法，我想要实现的是点击数组每一项都显示各自的方法，互不影响，怎样写有才对？

Answer 1

为啥要在方法里面用map遍历呢，在template里面用v-for 再把item传递到goToApp？

Answer 2

初步来看问题是在于每次点击触发goToApp的时候，map 会直接循环所有的 appIdNames。如果要是返回一个可执行的方法，应该是如下：

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

但是这样也会有问题，因为你没有最终并没有执行。而且这样去修改数据会很奇怪，一般并不会这样来操作。
所以大概我猜的你问的具体需求是：

想要循环输出一个列表，列表里面有N个对象，每一个对象点击都会跳转到对应的页面。

那业务代码就应该是这样：

<template>
  <ul>
    <li v-for="item in row.appIdNames" :key="item.appId">
      <router-link :to="`/app/info?id=${item.appId}&name=${item.appName}`">
        {{item.appName}}
      </router-link>
    </li>
  </ul>
</template>