如何根据 API 请求创建动态链接 [英] How to create dynamic links based on an API request

问题描述

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

我想关注当前是静态信息的 item 部分中正在执行的操作，但我想根据 json 请求中返回的内容动态返回链接.

import * as types from '../../mutation-types'从'./lazyLoading'导入lazyLoading从'./charts'导入图表//从 API 收集项目const url = 'http://localhost:8080/items/'数据: {项目: []},安装(){axios.get(url).then(response => {this.results = items.data})}//侧边栏链接在这里静态创建常量状态 = {项目: [{name: '仪表板',路径:'/仪表板'，元:{图标:'fa-转速计'，链接:'仪表板/index.vue'},组件:lazyLoading('dashboard', true)},{name: 'Axios',路径:'/axiosDemo',元:{身份验证:真实，图标:发火箭"，链接:'axios/index.vue'},组件:lazyLoading('axios', true)},图表，]}常量突变 = {[types.EXPAND_MENU](状态，菜单项){如果(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}}}导出默认{状态，突变}

我想我想做的是这样的(python示例):

项目:对于 items_payload 中的 i:{姓名:i.name,路径:i.url，元:{图标:'fa-转速计'，链接:i.name+'/index.vue'},},

我如何在 vue.js 中最好地实现这一点?任何帮助，将不胜感激.谢谢.

解决方案

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

//出于演示目的，假设链接作为对象数组返回[{href: '/path/to/page1',链接文本:'第 1 页'},{href: '/path/to/page2',链接文本:'第 2 页'}]//我的组件.vue<模板><div class="sidebar"><ul><li v-for="(item, index) in items" :key="index"><a :href="item.href">{{ item.linkText }}</a>

</模板>导出默认{数据 () {返回 {链接:[]}},安装(){axios.get(url).then(response => {this.links = items.data})}}

I am completely new to both vue.js and Javascript. How do I dynamically create nav links from an Axios request?

I am wanting to follow what's being done in the item section which is currently static information, but i want to dynamically return links based on whats returned in the json request.

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
}

I think what I am wanting to do is something like this (python example):

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

How do I best accomplish this in vue.js? Any help would be appreciated. Thanks.

解决方案

If you are making the api request from a component, you can create a list of links like follows:

// 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 请求创建动态链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！