VueJS+Laravel报错：Uncaught (in promise) TypeError问题求助

Hey there! Let's walk through why you're seeing this error and fix it up. The issue comes from a few small mistakes in how you're handling the Axios response and initializing your component data.

1. Wrong Callback Parameter Syntax #

First up, your Axios .then() callback is written incorrectly. You named the function response instead of using that as the parameter for the response object. That means inside the callback, response isn't actually holding the Axios response data—it's undefined, which is why you get the error when trying to access response.model.data.

2. Incorrectly Accessing Axios Response Data #

Axios wraps the backend's response in an object where the actual data from your Laravel API lives under response.data, not response.model.data. Unless your Laravel endpoint specifically returns a model key containing the data, you'll want to target response.data directly.

3. No Guard Clause for Unloaded Data #

You initialized model as an empty object {}. When your component first renders (before the Axios request finishes), model.data is undefined, and Vue tries to run v-for on that undefined value—causing another layer of errors.

4. Unnecessary Vue.set (and Better this Handling) #

Since model is already declared in your component's data, you don't need Vue.set to update it. Also, using arrow functions in the Axios callback lets you skip declaring var vm = this—arrow functions preserve the component's this context.

Fixed Home.vue Code #

Here's the corrected version with all these fixes, plus error handling:

<template>
  <table>
    <!-- Only render rows if model exists to avoid initial undefined errors -->
    <tr v-if="model" v-for="(restaurant, index) in model.data" :key="index">
      {{ restaurant.nom }}
    </tr>
    <!-- Optional loading state -->
    <tr v-else>
      <td>Loading restaurants...</td>
    </tr>
  </table>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      model: null // Initialize as null to check for loaded state
    }
  },
  created() {
    this.fetchDataResto()
  },
  methods: {
    fetchDataResto() {
      axios.get('/test')
        .then((response) => {
          // Adjust this line based on your Laravel API's response structure
          // If Laravel returns { data: [...restaurants] }, use this:
          this.model = response.data;
          
          // If Laravel returns just the array directly, use this instead:
          // this.model = { data: response.data };
        })
        .catch((error) => {
          // Catch and log any request errors (network issues, backend errors)
          console.error('Failed to fetch restaurants:', error);
        })
    }
  }
}
</script>

Laravel Backend Check #

Make sure your /test endpoint returns the correct JSON structure. For example, in your Laravel controller:

public function test()
{
    $restaurants = \App\Models\Restaurant::all();
    
    // Return data wrapped in a "data" key (matches the frontend's model.data)
    return response()->json([
        'data' => $restaurants
    ]);
}

Key Notes #

• Always add a .catch() to Axios requests to handle network errors or backend failures.
• Use v-if to guard against unloaded data before running v-for.
• Add a unique :key to v-for elements (Vue requires this for efficient rendering).

内容的提问来源于stack exchange，提问作者Tojo