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