使用mock模拟数据,为什么不起作用?
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/>'
})
为什么不发送请求?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
初步看你代码,this.$axios是没有的,有可能你笔误写成了Vue.prototype.axios=axios,需要改下:
Vue.prototype.$axios=axios