vue.js没有显示错误,但页面显示空白页面

时间:2019-03-14 08:53:29

标签: api vue.js axios

我正在创建Vue val strHistory = localHistory .mapNotNull { decoration.decoratedValue(ref.format, it ?: return@mapNotNull null) } 页面,我已经完成了路由,cmd中没有错误,但是当我打开页面时我什么也没显示。

这是我用于家庭的crud文件

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') 放在首页中。

0 个答案:

没有答案