vue 循环遍历数组对象并绑定事件？

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

数组对象数据：

[
    {
        "appId": 47,
        "appName": "撒大声地"
    },
    {
        "appId": 45,
        "appName": "车间爱仕达"
    }
]

要求把这个数组对象循环遍历出来每个对象绑定到vue-router跳转不同页面，我现在的方法

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

事件是绑定上了，但是不管数组里面有多少对象，都直接跳转最后一个对象页面上，求教大佬指点，怎么写就对了

回答：

嗯？是不是之前提过一个差不多的问题？
完整的组件代码应该是这样的

<template>
  <ul>
    <li v-for="item in list" :key="item.appId">
      <router-link :to="`/app/info?id=${item.appId}&name=${item.appName}`">
        {{item.appName}}
      </router-link>
      <!-- 当然也可以这样 -->
      <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}`);
    }  
  }
}

回答：

额，初学者吗？
你先用 vue 的v-for循环html元素。
https://cn.vuejs.org/guide/es...

<li v-for="row in items">
  {{ row.appName }}
</li>
-- items 是数组变量名

然后绑定一下点击事件
https://cn.vuejs.org/guide/es...

<li v-for="row in items" @click="goToApp(row)>
  {{ row.appName }}
</li>
methods: {
  goToApp(row) {
    // 当前点击的元素的数据
     this.$router.push(`/app/info?id=${row.appId}&name=${row.appName}`);
  }
}

回答：

遍历时，重复给 this.appId, this.appName 绑定值，最后实际值肯定是最后一项。
（这里不推荐用map做遍历，可以for循环，或者forEach方法）

看你需求，应该是给 row.appIdNames 的每一项绑定事件即可。看下伪代码：

<ul>
  <li v-for="item in this.appIdNames">
    <router-link to=`/app/info?id=${item.appId}&name=${item.appName}`>{{ item.appName }}</router-link>
  </li>
</ul>
goToApp(row) {
    this.appIdNames = row.appIdNames;
}

以上是 vue 循环遍历数组对象并绑定事件？ 的全部内容， 来源链接： utcz.com/p/932840.html

回到顶部