Question

我想显示从Axios库提取的JSON信息。我想使用{{ id }}来在请求中调用某个参数。

我有一个外部 js文件。

const Home = { 
    template: `

    <div class="user">
        <h2>user {{ id }}</h2>
        bet
    </div>

    `,
    props: {
        id: {
            type:    String,
            default: 'N/A'
        }
    } 
}

CDN包括：

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="../../jobs/job.js"></script>

路由器非常简单：

const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/jobs/:id?',
                component: Home,
                props:     true
            },
        ],
    })

谢谢

Answer 1

目前尚不清楚ID是属性还是路由参数。我认为您在这里使用route参数。如果是这样，并且您没有将其直接传递到组件中，那么我认为您可以放心地将其删除，并将其替换为将返回ID的计算属性。然后，只需添加将执行您的axios请求的method。然后在您组件的mounted方法中调用该请求。

我的想法是：

const Home = { 
  template: `

  <div class="user">
    <h2>user {{ id }}</h2>
    bet
  </div>

  `,
  mounted: function() {
    this.myRequest()
  }, 
  computed: {
    id: {
      get: function() {
        return this.$route.params.id
      }
    }
  },
  methods: {
    myRequest() {
      axios.get('/path/to/my/request', { params: { id: id }})
        .then(response => {
          console.log(response)
        }).catch(error => {
          console.log(response)
        })
    }
  }
}

使用Axios CDN在Vue模板中显示

1 个答案: