Laravel5.4+Vue.js数组遍历异常求助：无法渲染控制器返回数据

Hey there! Let's break down the possible issues that might be stopping your Vue v-for loop from working correctly with the data returned by your Laravel controller. I'll go through each potential problem step by step and suggest fixes:

1. Incorrect Vue Lifecycle Hook & Filter Placement #

First up, in Vue 2, the ready hook has been deprecated—you don't need to call created() from it at all. Also, defining a Vue filter inside the axios promise callback won't work as expected, because filters need to be registered before the Vue instance is created.

Here's the corrected version of your Vue code:

// Define your filter FIRST, outside the Vue instance
Vue.filter('myOwnTime', function(value){
  return moment(value).fromNow();
});

// Create your Vue instance next
const root = new Vue({
  el: '#root',
  data: {
    msg: 'Update New Post:',
    content: '',
    posts: []
  },
  // Use only the created hook, no need for ready
  created() {
    // You can also use arrow functions to avoid storing `_this`
    axios.get('http://localhost:8000/mur/posts')
      .then(response => {
        this.posts = response.data;
        console.log('Fetched posts:', response.data);
      })
      .catch(error => {
        console.error('Error fetching posts:', error);
      });
  }
});

2. Missing Key Attribute in v-for #

Vue requires a unique key attribute for elements rendered with v-for to track list items efficiently. Without it, you might run into rendering bugs or console warnings. Update your Blade template like this:

<div v-for="post in posts" :key="post.id">
  <!-- Your rendering content here -->
</div>

Using post.id is perfect since it's a unique identifier for each post.

3. Potential CORS Issues #

If your Vue frontend is running on a different port (e.g., localhost:8080 for a Vue dev server) than your Laravel backend (localhost:8000), you'll hit a Cross-Origin Resource Sharing (CORS) error. To fix this:

• Install the barryvdh/laravel-cors package and configure it to allow requests from your frontend origin.
• Alternatively, add custom CORS headers in a Laravel middleware and apply it to your /mur/posts route.

4. Verify API Response Validity #

Before assuming the issue is with Vue, confirm your Laravel API is returning valid data:

• Open http://localhost:8000/mur/posts directly in your browser. You should see a JSON array of posts with a 200 OK status code.
• If you get a 500 error, check your Laravel logs (storage/logs/laravel.log)—common issues here include typos in the model name (e.g., using Posts instead of Post if your model is singular) or missing relationships in the with() method.

5. Ensure Template References Exist #

Double-check that any properties you're rendering in your v-for loop actually exist in the API response. For example, if you're using post.user.name, make sure the user relationship is properly loaded (your controller uses with('user'), which is good, but confirm the user object isn't null). You can use v-if to handle potential null values:

<span v-if="post.user">{{ post.user.name }}</span>

Quick Troubleshooting Checklist #

1. Check browser console for errors (CORS, Vue warnings, axios errors).
2. Verify API returns valid JSON array when accessed directly.
3. Fix Vue lifecycle hooks and filter placement.
4. Add a unique key to your v-for element.
5. Ensure template properties match the API response structure.

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