vue.js+vue-router有Link的动作,但是组件未渲染?

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>

附加一些图片说明:
这是之前的抓取到数据的截图:
图片描述

这是目前的截图:图片描述

阅读 4.8k
2 个回答

看数据取到没有,看代码只是一方面。
发现几处不懂的地方:

users: this.users ?
return this.users ?
<td><button @click="deleteUsers() :id=user.id>删除</button><td>
deleteUsers: function(){}//此处删除Id你能接受到?还有前面的,是你粘贴掉了吗?
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题