1.最近开始学习vue,使用的是github上的vue-admin来实现一个后台管理应用。Vue-damin 本身link的是静态的组件,不含<script>
标签在具体操作的时候,昨天我已经实现了用vue-resource从后端获取用户数据并渲染,但在加入删除用户操作后发现当初Link的组件无法渲染,直接为空,回到之前的获取用户数据的步骤依然为空。知道把<script>
标签删除后才会渲染出原来的静态页面,不知道问题在哪里,请大家指点。
<template>
<div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<h4 class="title">用户列表</h4>
<table class="table">
<thead>
<tr>
<th>用户编号</th>
<th>用户名</th>
<th>联系电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.email }}</td>
<td><button @click="deleteUsers() :id=user.id>删除</button><td>
</tr>
</tbody>
</table>
</article>
</div>
</div>
</div>
</template>
<script>
export default {
ready () {
this.getUsers()
},
data () {
return {
users: this.users
}
},
methods: {
getUsers: function () {
let newUrl = 'http://127.0.0.1:38080/admin/api/v1/user/admin/user?appKey=1'
this.$http.post(newUrl)
.then((ret) => {
this.users = ret.data.data
return this.users
})
}
deleteUsers: function(){
//var userId = this.id
var vm = this
let deleteUrl = 'http://127.0.0.1:38080/admin/api/v1/user/admin/appKey/1'+'?userId='+user.id
vm.$http.delete(deleteUrl)
.then((ret) => {
vm.getUsers()
})
}
}
}
</script>
<style lang="scss">
.table-responsive {
display: block;
width: 100%;
min-height: .01%;
overflow-x: auto;
}
</style>
附加一些图片说明:
这是之前的抓取到数据的截图:
这是目前的截图:
看数据取到没有,看代码只是一方面。
发现几处不懂的地方: