Absolute beginner at Vue & php, started working on a tutorial. Everything works except I get the mentioned error when retrieving vehicles.

I messed around, and afaik it's not the API call (going to localhost:8000/api/vehicles results in the table being shown properly.)

Relevant(?) Code: (if more is needed, comment)

AllVehicles.vue

    <template>
    <div>
        <h2 class="text-center">Vehicles List</h2>

        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
                <th>Mileage</th>
                <th>VIN</th>
                <!-- <th>Actions</th> -->
            </tr>
            </thead>
            <tbody>
            <tr v-for="vehicle in this.vehicles" :key="vehicle.vid">
                <td>{{ vehicle.vid }}</td>
                <td>{{ vehicle.make }}</td>
                <td>{{ vehicle.model }}</td>
                <td>{{ vehicle.year }}</td>
                <td>{{ vehicle.mileage }}</td>
                <td>{{ vehicle.VIN }}</td>
                <td>
                    <div class="btn-group" role="group">
                        {/*<router-link :to="{name: 'edit', params: { id: vehicle.vid }}" >Edit</router-link>*/}
                        <button class="btn btn-danger" @click="deleteVehicle(vehicle.vid)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script >
    export default {
        data: {
            vehicles: []
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/vehicles/')
                .then(response => {
                    this.vehicles = response.data;
                    console.log(this.vehicles);
                });
        },
        methods: {
            deleteVehicle(vid) {
                this.axios
                    .delete(`http://localhost:8000/api/vehicles/${vid}`)
                    .then(response => {
                        let i = this.vehicles.map(data => data.vid).indexOf(vid);
                        this.vehicles.splice(i, 1)
                    });
            }
        }
    }
</script>

app.js

    /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
import Vue from 'vue/dist/vue.js';

require('./bootstrap');
window.Vue = Vue;

import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    data: {
        vehicles: []
    },
    router: router,
    render: h => h(App),
});

routes.js

import AllVehicles from './components/AllVehicles.vue';

export const routes = [{
    name: 'home',
    path: '/',
    component: AllVehicles
}];

I have noticed specifically the error is coming from <tr v-for="vehicle in this.vehicles" :key"vehicle.vid"> (regardless of using this. or not) which leads me to suspect it's not seeing the vehicles defined in the data segment below. Unfortunately I have absolutely no clue what's going on here.

CodePudding user response：

In your app.js is wrong declarate the data, you should only declarate the '#app' div where is your application main component.

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App),
});

in your component AllVehicles you change the data :

name:'AllVehicles',
    data() {
        return {
            vehicles: [],
        };
    },


created() {
            this.axios
                .get('http://localhost:8000/api/vehicles/')
                .then(response => {
                    this.vehicles = response.data;
                    console.log(this.vehicles);
                });
        },

after this change on your console you should execute: npm run dev to update the changes.

CodePudding user response：

This portion if your code is what is giving you the error

<tr v-for="vehicle in this.vehicles" :key="vehicle.vid">
                <td>{{ vehicle.vid }}</td>
                <td>{{ vehicle.make }}</td>
                <td>{{ vehicle.model }}</td>
                <td>{{ vehicle.year }}</td>
                <td>{{ vehicle.mileage }}</td>
                <td>{{ vehicle.VIN }}</td>
                <td>
                    <div class="btn-group" role="group">
                        {/*<router-link :to="{name: 'edit', params: { id: vehicle.vid }}" >Edit</router-link>*/}
                        <button class="btn btn-danger" @click="deleteVehicle(vehicle.vid)">Delete</button>
                    </div>
                </td>
            </tr>

Because it is assumed that you have a data this which is an object with vehicles in it referenced by this.vehicles. Since vehicle does not exist, it is assumed you are looping through a non-existent value.

In the template, you do not need this. So the right code will be

<tr v-for="vehicle in vehicles" :key="vehicle.vid">
                <td>{{ vehicle.vid }}</td>
                <td>{{ vehicle.make }}</td>
                <td>{{ vehicle.model }}</td>
                <td>{{ vehicle.year }}</td>
                <td>{{ vehicle.mileage }}</td>
                <td>{{ vehicle.VIN }}</td>
                <td>
                    <div class="btn-group" role="group">
                        {/*<router-link :to="{name: 'edit', params: { id: vehicle.vid }}" >Edit</router-link>*/}
                        <button class="btn btn-danger" @click="deleteVehicle(vehicle.vid)">Delete</button>
                    </div>
                </td>
            </tr>

Check below for an example of such use case for vue 2 documentation.

https://vuejs.org/v2/guide/#:~:text=

<script>
   stuff
</script>

<
script>
   stuff
</script>