Question

我对vue.js和Javascript都是全新的。如何从Axios请求动态创建导航链接？

我想要关注当前静态信息的项目部分中的内容，但我想根据json请求中返回的内容动态返回链接。

import * as types from '../../mutation-types'
import lazyLoading from './lazyLoading'
import charts from './charts'


// gathering items from API
const url = 'http://localhost:8080/items/'    
data: {
  items: []
},
mounted() {
  axios.get(url).then(response => {
    this.results = items.data
  })
}

// Sidebar links are statically created here

const state = {
  items: [
    {
      name: 'Dashboard',
      path: '/dashboard',
      meta: {
        icon: 'fa-tachometer',
        link: 'dashboard/index.vue'
      },
      component: lazyLoading('dashboard', true)
    },
    {
      name: 'Axios',
      path: '/axiosDemo',
      meta: {
        auth: true,
        icon: 'fa-rocket',
        link: 'axios/index.vue'
      },
      component: lazyLoading('axios', true)
    },

    charts,

  ]
}

const mutations = {
  [types.EXPAND_MENU] (state, menuItem) {
    if (menuItem.index > -1) {
      if (state.items[menuItem.index] && state.items[menuItem.index].meta) {
        state.items[menuItem.index].meta.expanded = menuItem.expanded
      }
    } else if (menuItem.item && 'expanded' in menuItem.item.meta) {
      menuItem.item.meta.expanded = menuItem.expanded
    }
  }
}

export default {
  state,
  mutations
}

我认为我想要做的就是这样（python示例）：

items: 
    for i in items_payload:
        {
          name: i.name,
          path: i.url,
          meta: {
              icon: 'fa-tachometer',
              link: i.name+'/index.vue'
                },
        },

我如何在vue.js中做到最好？任何帮助，将不胜感激。感谢。

Answer 1

如果要从组件发出api请求，可以创建如下链接列表：

// for demo purposes, let's say links are returned as an array of objects
[
  {
    href: '/path/to/page1',
    linkText: 'Page 1'
  },
  {
    href: '/path/to/page2',
    linkText: 'Page 2'
  }
]

// MyComponent.vue
<template>
  <div class="sidebar">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <a :href="item.href">{{ item.linkText }}</a>
      </li>
    </ul>
  </div>
</template>

export default {
  data () {
    return {
      links: []
    }
  },
  mounted() {
    axios.get(url).then(response => {
      this.links = items.data
    })
  }
}

如何基于API请求创建动态链接

1 个答案: