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

Question

为什么不能通过 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>

TaskDetails.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, 安东

Answer 1

我整理了一个包含两个组件和一个路由器的示例来展示如何实现。

路由器

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>