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

  • Z时代
  • 2024-02-10
  • 分类：IT

方法

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

row.appIdNames代表数组对象

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

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

回答：

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

回答：

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

vue"><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>
  ))
}

以上是 vue 如何给数组对象绑定事件？ 的全部内容， 来源链接： utcz.com/p/932841.html

回到顶部