使用mock模拟数据,为什么不起作用?

发布于 2022-09-07 23:46:30 字数 4514 浏览 20 评论 0

user.vue:

<template>
    <el-row class="wrap">
        <el-col :span="24" class="warp-breadcrum">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
           </el-breadcrumb>
        </el-col>

        <el-col :span="24" class="warp-min" v-loading="loading"  element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-col :span="24" class="toolbar">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" align="left">
                   <el-input v-model="formInline.user" placeholder="用户名/姓名/昵称" style="min-width: 240px;"></el-input>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form>
            </el-col>

             <el-table
                :data="users"
                highlight-current-row
                v-loading="loading"
                align="center">
                    <el-table-column    
                        prop="this.users.name"
                        label="姓名"
                        width="120"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.nickname"
                        label="昵称"
                        width="120"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.city"
                        label="城市"
                        width="100"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.email"
                        label="邮箱"
                        width="160"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.address"
                        label="地址"
                        sortable>
                    </el-table-column>
                </el-table>
        </el-col>

    </el-row>
</template>
<script>
export default {
  name: 'UserList',
  data() {
      return {
        loading: false,
        formInline: {
          user: ''
        },
        users: [{
            nickname: '',
            name: '',
            city: '',
            email: '',
            address: ''
          }]
      }
    },
    creates () {
        this.getdata();
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      getdata() {
          this.$axios.get("/userlist").then(res => {
              this.users = res.data
          }).catch((error) => {
            console.info(error);
        })
      }

    }
}
</script>

mock.js:

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const userList = function () {
  let Data = []
  for (let i = 0; i < 100; i++) {
    let data = {
      nickname: Random.cname(),
      name: Random.cname(),
      city: Random.city(),
      email: Random.email(),
      address: Random.region()}
    Data.push(data)
  }
  return {
    Data: Data
  }
}
// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/userlist', 'get', userList)

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import router from './router'
import echarts from 'echarts'
import axios from 'axios'
require('./mock.js')

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

clipboard.png

为什么不发送请求?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

刘备忘录 2022-09-14 23:46:30

初步看你代码,this.$axios是没有的,有可能你笔误写成了Vue.prototype.axios=axios,需要改下:
Vue.prototype.$axios=axios

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文