时间戳

首页 > 解决方案 > Vue.js + vue-router + axios + Laravel。无法按 id 检索值

laravel - Vue.js + vue-router + axios + Laravel。无法按 id 检索值

问题描述

为什么不能通过 axios 获取值？

我得到了正确的任务 ID，可以在 Blade 中显示，但无法在 Vue 中显示。

错在哪里？

id = 4 - 是任务的 ID 当我尝试http://cosys.loc/api/task/4 - 没问题，我得到 ID 为 4 的任务的 json。

这是例如链接：<router-link :to="{ name: 'TaskShow', params: { id: 4 }}">Show details</router-link>

任务详情.vue：

<template>
  <div class="container-fluid my-3">
    <h1>ID from URL: #{{ this.$route.params.id }}</h1>
    <h2>taskId: {{ taskId }}</h2>
    <p class="lead">{{ this.$route.tasks }}</p>
    <ul>
      <li>{{ tasks.id }}</li>
      <li>{{ tasks.title }}</li>
      <li>{{ tasks }}</li>
    </ul>
  </div>
</template>

<script>

import axios from 'axios';

export default {

  name: "TaskDetails",

  data() {
    return {
      tasks: {},
      taskId: this.$route.params.id,
      loading: true,
      errored: false,
    }

  },

  mounted() {
    axios
        .get(`/api/task/${this.$route.params.id}`)
        .then(response => (this.tasks = response.data.tasks), (console.log(`${this.$route.params.id}`)))
        .catch(error => console.log(error))
        .finally(() => (this.loading = false));
  },

}
</script>

<style scoped>

</style>

当我打开 url http://cosys.loc/tasks/show/4获取 ID 为 1 的任务的值。为什么，如何解决这个问题？

Tnx，安东

标签： laravelvue.jsaxiosvue-router

解决方案

我将一个包含两个组件和一个路由器的示例放在一起来展示如何实现。

路由器

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Home from '@/components/stackoverflow/router-params-example/Home'
import Detail from '@/components/stackoverflow/router-params-example/Detail'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    props: true
  }
]

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

家

<template>
  <div class="parent">
    <h4>Home</h4>
    <div class="row">
      <div class="col-md-6">
        <router-link class="btn btn-primary" :to="{ name: 'detail', params: { id: detailId } }">Show Detail</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        detailId: 1
      }
    }
  }
</script>

细节

<template>
  <div class="child">
    <h4>Detail</h4>
    <div class="row">
      <div class="col-md-6">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>NAME</th>
              <th>USER NAME</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.username }}</td>
            </tr>
          </tbody>
        </table>
        <router-link class="btn btn-secondary" :to="{ name: 'home' }">Back</router-link>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    props: {
      id: {
        type: Number,
        required: true
      }
    },
    data() {
      return {
        user: {}
      }
    },
    methods: {
      getUser() {
        axios.get('https://jsonplaceholder.typicode.com/users/' + this.id)
        .then( response => this.user = response.data )
        .catch( error => console.log(error) )
      }
    },
    created() {
      this.getUser();
    }    
  }
</script>

推荐阅读