я создаю страницу vue crud
, я уже проложил маршрут, в 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
на главной странице.