Vue使用v-for遍历map

功能：

遍历数据库中按钮的图片和名字，当页面打开时，触发查询事件，以下图形式显示出来。

前端代码：

 

遍历存在数据库中的按钮名称和图片名称。（其中按钮的click事件名称和按钮图片名称相同。 ）

<template>
  <div class="more">
    <!-- 其他 -->
    <van-button type="default" v-for="(value, key) in mor" :key="key" :icon="require(`../../assets/main/${value.image}.png`)" @click="func(value.image)">{{value.name}}</van-button>
    <!-- 固定的 -->
    <van-button type="default" v-for="(value, key) in def" :key="key" :icon="require(`../../assets/main/${value.image}.png`)" @click="func(value.image)">{{value.name}}</van-button>
    </div>
</template>

 

<script>
export default {
  name: 'more',
  data () {
    return {
// 定义一下两个数组
      mor: [],
      def: []
    }
  },
  // 页面打开时，触发查询事件
  created () {
    this.querylist1()
  },
 methods: {
// 函数传参形式，实现click事件
    func (param) {
      this.$router.push({
        path: '/' + param
      })
    },
    // 查询用户APP
    querylist1 () {
      const url = 'http://XXX.XXX.XX.XX:8090/intelligentWeavingItems-web/userset/userset'
      this.$axios
        .get(url, {})
        .then(res => {
          if (res.data.code === '0000') {
            this.mor = res.data.data.mor
            this.def = res.data.data.default
          }
        })
    }
  }
}

后端接口json：

如上图，第一段代码中的v-for="(value, key) in mor，就是遍历图中mor里的内容。value.image就是图中横线所标识的值。其中key为键，value为对应的值。用v-for可以找到mor和default里面我们所需的所有的值。