api - vue.js 没有显示错误，但页面显示空白页面

Question

我正在制作一个vuecrud页面，我已经制作了路线，cmd中没有错误但是当我打开页面时我没有显示任何内容。

这是barang.vue我用于家庭的文件

<template>
    <div>
        <router-link to="/BarangForm/create">Tambah Barang</router-link>
        <table>
            <tr>
                <th>no</th>
                <th>Nama</th>
                <th>jenis</th>
                <th>Harga</th>
                <th>Kuantitas</th>
            </tr>
            <tr v-for="(barang, i) in data_barang" :keys="i">
                <td>{{ i + 1}}</td>
                <td>{{ barang.nama_barang }}</td>
                <td>{{ barang.harga_barang }}</td>
                <td>{{ barang.jenis_barang }}</td>
                <td>{{ barang.kuantitas }}</td>
                <td>
                    <router-link :to="'/barang' + barang.id">Edit</router-link>
                    <button @click="deleteRow(barang.id)">Delete</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name: 'barang',
    data () {
        return{
            data_barang: []
        }
    },
    mounted () {
        this.get()
    },
    methods: {
        get () {
            axios.get('barang').then(res => {
                if (res.data.status === 'success') {
                    this.data_barang = res.data.result
                }
            })
        },
        deleteRow (id) {
            axios.delete('barang/' + id).then(res => {
                if(res.data.status === 'success') {
                    this.get()
                }
            })
        }
    }
}
</script>

这是创建和编辑的表格

<template>
    <div>
        <form @submit.prevents="submitForm">
            <div>
                <label>Nama Barang : </label>
                <input type="text" v-model="barang.nama_barang">
            </div>
            <div>
                <label>Harga Barang : </label>
                <input type="text" v-model="barang.harga_barang">
            </div>
            <div>
                <label>Jenis Barang : </label>
                <input type="text" v-model="barang.jenis_barang">
            </div>
            <div>
                <label>Kuantitas : </label>
                <input type="text" v-model="barang.kuantitas">
            </div>
            <button type="submit">Masukan</button>
        </form>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        name: 'BarangForm',
        data () {
            return {
                barang: {
                    id: null,
                    nama_barang: null,
                    jenis_barang: '',
                    harga_barang: '',
                    kuantitas: ''

                }
            }
        },

        mounted () {
            let id = this.$route.params.id

        if (id) {
            axios.get('/barang/' + id).then(res => {
                this.barang = res.data.result
            })
        }
        },
        methods: {
            submitForm () {
                let data = this.barang
                let url = 'barang'

                if (this.barang.id){
                    url += '/' + this.barang.id
                }

                axios.post(url, data).then(res => {
                    if (res.data.status === 'success') {
                        this.$router.push('/barang')
                    }
                })
            }
        }
    }
</script>

这是用于配置路由的路由器

import Vue from 'vue'
import barang from '@/components/barang'
import BarangForm from '@/components/BarangForm'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
    {
        path: '/',
        name: 'barang',
        component : barang 
    },
    {
        path: '/barang/create',
        name: 'BarangCreate',
        component: BarangForm
    },
    {
        path: '/barang/:id',
        name: 'BarangEdit',
        component: BarangForm
    }   
    ]
})

这是呈现页面的文件

import Vue from 'vue'
import App from './App.vue'
import Router from './router/index.js'

Vue.config.productionTip = false

new Vue({
    Router,
  render: h => h(App),
}).$mount('#app')

我打算把每一个router-link放在主页上。

标签： apivue.jsaxios