vue里面这个foreach中this为什么指向undefine?
 var a = [{name: 'yang',age:1},{school:'one'}]
console.log(this)  //window
this.a.forEach(function () {
  console.log(this) //window
})

forEach是不是不改变this指向,为什么下面这个图里面forEach中this由组件变成了undfine?
图片说明

https://gitee.com/qflyalltime/travel/blob/master/src/pages/city/components/Search.vue
第55行

8个回答

打印的是window啊。。没问题。。

 <script src="https://cn.vuejs.org/js/vue.js"></script>
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="keyword">
    </p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: { cities: [[1, 2], [3, 4]] ,keyword:null},
        watch: {
            keyword: function (newValue, oldValue) {
                setTimeout(()=>{
                    console.log(this)
                    for (let i in this.cities) {
                        this.cities[i].forEach(function (item) {
                            console.log(item,this)
                        });
                    }
                },1000)
            }
        }
    });
  </script>
showbo
支付宝加好友偷能量挖 回复qflyalltime: 严格模式this不能指向全局对象,如window,所以是undefined。。
大约 2 年之前 回复
qflyalltime
小羊也疯狂 回复qflyalltime: 可能单文件组件采用了严格模式吧
大约 2 年之前 回复
qflyalltime
小羊也疯狂 ...我也不知道,是不是我们文件组织方式不一样 https://gitee.com/qflyalltime/travel/blob/master/src/pages/city/components/Search.vue 第55行
大约 2 年之前 回复

里面那个this是foreach的回调里的this,跟外层vue对象的this不一样,可以在外层let cur = this ,再在foreach里面使用cur,这样就是想要的this指向了

此处thiss.a,this未定义

请使用es6语法,把function(item){} 改为 (item)=>{} this就会指向vue了,

具体原因是,this指向调用的对象,而forEach回调函数并不是由this.a调用的,而是通过某种途径由window直接调用,所以要使this指向数组,必须使调用的
对象无作用域,建议用es6箭头函数,里面每一层this没有作用域,因此和该数组一样的作用域

应该是启用了严格模式,代码加入一句'use strict';,将指定代码在严格条件下执行。
严格模式下,禁止this关键字指向全局对象,因此this会是undefined

每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined,非严格模式下是 window。
也就是说,function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this,是访问外层作用域中的this。

建议使用es6箭头函数,this自动绑定父作用域

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
VUE element 自定义检验规则函数中使用的this指向了第一个参数?

![图片说明](https://img-ask.csdn.net/upload/201906/13/1560396942_327393.png)![图片说明](https://img-ask.csdn.net/upload/201906/13/1560396949_586275.png)![图片说明](https://img-ask.csdn.net/upload/201906/13/1560396953_981430.png) 在使用elementUI的过程中,自定义校验函数的时候,方法中的this指向了第一个参数,而不是和教程中一样指向vue的实例,请大神指教具体的原因 该问题已解决,我将方法该回了闭包的写法,虽然打断点的时候this还是显示是第一个参数,但是通过self=this 赋值后,self就变成了vue的实例,很神奇的事情

vue中this遇到点问题,到底能不能用箭头函数?

问题1:下面这个是由于在红圈那this改变了所以要先把指向组件实例的this保存到that吗 ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155149_855087.png) 问题2. ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155228_385552.png) 上面这个箭头函数使this绑定到了定义时的this,也就是vue组件实例上,console.log(this)就是组件实例! 我受上面这个箭头函数的启发在下面这张图中也使用了但是为什么不成功,this不知道绑定到了什么东西上去了 ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155369_728168.png) console.log(this) ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155390_169491.png) 为什么不成功,绑定的是个啥? 3.这里只能用es5的方法吗?不能使用箭头函数?

vue启动报错,任务栏提示error:undefine,控制台显示编译一个错误,但是没有显示原因!

![图片说明](https://img-ask.csdn.net/upload/201908/20/1566266584_127883.png) vue启动就报这个错,npm install 重试了也没用,并且任务栏右下角会报这个 ![图片说明](https://img-ask.csdn.net/upload/201908/20/1566266663_101546.png) 应该不是页面语法有问题,因为我重新新建一个vue项目,然后把所有的文件和配置都copy过来。一模一样的项目就可以启动成功,但是过一会儿又会突然报这个错,求求哪位大佬指点一下迷津呀!

js闭包中this指向的问题

下面是百度今年的一个笔试题: var myObject = { foo:"bar", func: function() { var self = this; console.log("outer func: this.foo = " + this.foo); console.log("outer func: self.foo = " + self.foo); (function (){ console.log("inner func: this.foo = " + this.foo); console.log("inner func: self.foo = " + self.foo); }()); } } myObject.func(); 结果是 bar bar undefined bar 关于第三个undefined我是这样理解的:func是myObject对象的属性方法,所以其内部this指向myObject对象本身。而此属性方法内部的匿名立即执行函数是独立的,其this指向自身的执行上下文,引用不到外部的foo,所以是undefined。但由于作用域链使用self可以通过self引用到外部,所以第四个是bar。 我是这样理解的,并且我做了个推论: function outer(){ this.i = 10; alert(this.i); (function(){ alert(this.i); }()); }; outer(); 按道理第二次弹出对话框是undefined才对,可是它却是10!它这里怎么又能通过this引用外部的i了呢?why? 请大神不吝赐教!

在 forEach 循环中使用 async / await

<div class="post-text" itemprop="text"> <p>Are there any issues with using <code>async/await</code> in a <code>forEach</code> loop? I'm trying to loop through an array of files and <code>await</code> on the contents of each file. </p> <pre><code>import fs from 'fs-promise' async function printFiles () { const files = await getFilePaths() // Assume this works fine files.forEach(async (file) =&gt; { const contents = await fs.readFile(file, 'utf8') console.log(contents) }) } printFiles() </code></pre> <p>This code does work, but could something go wrong with this? I had someone tell me that you're not supposed to use <code>async/await</code> in a higher order function like this so I just wanted to ask if there was any issue with this.</p> </div> <p>转载于:https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop</p>

nodejs promise 多个foreach返回问题

如图所示,我这样最后返回的temp_data只是第一个foreach循环里的第一次,但是我想要第一个foreach全部走完后的temp_data,即secondary_data等于全部foreach走完后的最后的数据。。自己改来改去都不对,感觉自己大脑短路了![图片](https://img-ask.csdn.net/upload/201703/26/1490541999_207876.jpg)

vue相关,为什么只有最后一个值改变了

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head><body> <div id="app"> <c1 ref='ref1'></c1><hr> <c2></c2> <c2></c2> </div> <!-- js --> <script> var cc=new Vue(); var vm=new Vue({ el:'#app', components:{ c1:{ template:"<input v-model='c1Val' @keyup='c1func'/>", methods:{ c1func:function(){ cc.$emit('ccfunc',this.c1Val); } }, data:function(){return {c1Val:0}} }, c2:{ template:"<h1>{{c2Val}}</h1>", data:function(){return {c2Val:1}}, mounted:function(){ $this=this; cc.$on('ccfunc',function(msg){ //$this.c2Val=msg; $this.c2Val=vm.$refs.ref1.c1Val }) } } } }) ``` 如代码所示,修改c1的输入框,第二个c2回跟着改变,第一个c2始终不变。这是为什么

VUE项目,子组件无法调用父组件的方法,this.$parent、this.$emit 都不行

原本是想要用这个子组件去调用父组件的方法,但是用VUE的三种调用方法都无法实现,想问一下还有没有什么方法能让我 在子组件的点击事件里,成功调用父组件的方法的。 ![父组件](https://img-ask.csdn.net/upload/202001/14/1578969855_255466.png) ![子组件](https://img-ask.csdn.net/upload/202001/14/1578969871_100985.png)![子组件的JS代码](https://img-ask.csdn.net/upload/202001/14/1578969877_431503.png)

vue 修改的时候报undefind错误

<template> <el-container v-loading="loadingData" style="height: 100%" class="app-container calendar-list-container"> <el-header height="62px" class="filter-container"> <el-row> <el-col :span="21"> <el-form :inline="true" :model="formSearch" class="demo-form-inline"> <el-form-item> <el-input v-model="formSearch.value" placeholder="请输入水道名称" clearable></el-input> </el-form-item> <el-form-item> <el-select v-model="formSearch.type" filterable clearable placeholder="请选择水道类型"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-select v-model="formSearch.official" placeholder="请选择水道性质" filterable clearable> <el-option key="true" label="正式水道" value="true"></el-option> <el-option key="false" label="测试水道" value="false"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="loadMain" size="small" icon="el-icon-search" round>搜索</el-button> </el-form-item> </el-form> </el-col> <el-col :span="3" style="text-align: right"> <el-button @click="handleAdd" v-show="visibleBtnAdd" type="success" size="small" icon="el-icon-plus" round>新增水道</el-button> </el-col> </el-row> </el-header> <el-main ref="layoutMain" class="table-container"> <el-table :data="dataMain" :height="heightMain" stripe highlight-current-row class="el-table-border"> <el-table-column prop="name" label="水道名称"></el-table-column> <el-table-column prop="swzName" label="水位站"></el-table-column> <el-table-column prop="typeName" label="水道类型" width="100"></el-table-column> <el-table-column prop="isOfficial" label="水道性质" align="center" width="100" :formatter="formatOfficial"></el-table-column> <el-table-column prop="startName" label="水道起点" width="100"></el-table-column> <el-table-column prop="endName" label="水道讫点" width="100"></el-table-column> <el-table-column label="里程" width="100"> <template slot-scope="scope">{{ Math.abs(scope.row.endMileage - scope.row.startMileage) + '公里' }}</template> </el-table-column> <el-table-column prop="remark" label="水道概况" width="200"></el-table-column> <el-table-column label="操作" align="center" fixed="right" width="150"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)" v-show="visibleBtnEdit" type="primary" size="mini" round plain>编辑</el-button> <el-button @click="handleDelete(scope.row)" v-show="visibleBtnDelete" type="danger" size="mini" round plain>删除</el-button> </template> </el-table-column> </el-table> </el-main> <el-footer> <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" :current-page="dataPage" :page-sizes="[10, 20, 50, 100]" :page-size="dataSize" :total="dataTotal" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </el-footer> <el-dialog :title="dataRecordTitle[actionDialogRecord]" :visible.sync="visibleDialogRecord" :close-on-click-modal="false" :before-close="handleClose" > <el-form class="large-space" ref="formRecord" :model="formRecord" :rules="ruleRecord" label-position="left" label-width="90px"> <el-row :gutter="24"> <el-col :span="4"><strong>图片信息</strong></el-col> <el-col :span="20"> <el-upload :action="imageUpload" :headers="headers" :with-credentials="true" list-type="picture-card" :file-list="formRecord.waterInfomationPicDTO" :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" style="float: left; margin-bottom: 10px"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" size="tiny"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-col> </el-row> <el-form-item label="水道名称" prop="name"> <el-input v-model="formRecord.name"></el-input> </el-form-item> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道类型" prop="type"> <el-select v-model="formRecord.type" filterable placeholder="请选择水道类型" style="width: 100%"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道性质" prop="official"> <el-switch v-model="formRecord.official" :disabled.sync="disabledSelOfficial" active-text="正式水道" inactive-text="测试水道" ></el-switch> </el-form-item></el-col> </el-row> <!-- <el-form-item label="位置" prop="waterway"> <map-box v-loading="loadingWaterway" @mapReady="handleMapReady" class="map-box"></map-box> </el-form-item> --> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道起点" prop="start"> <el-select ref="selStart" v-model="formRecord.start" filterable placeholder="请选择水道起点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道讫点" prop="end"> <el-select ref="selEnd" v-model="formRecord.end" filterable placeholder="请选择水道讫点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水位站" prop="swzId"> <el-select ref="selStation" v-model="formRecord.swzId" filterable placeholder="请选择关联水位站" style="width: 100%"> <el-option v-for="item in dataWaterStation" :key="item[0]" :label="item[1]" :value="item[0]"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-form-item label="水道概况" prop="remark"> <el-input type="textarea" v-model="formRecord.remark"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取消</el-button> <el-button @click="handleSave" type="primary">保存</el-button> </div> </el-dialog> </el-container> </template> <style rel="stylesheet/scss" lang="scss" scoped> .map-box { height: 200px; overflow: auto; border: 1px solid #ebeef5; } </style> <script> import $ from 'jquery' import waves from '@/directive/waves/index.js' import MapBox from '@/components/mapBox.vue' import { addGraphicsLayer, RAddListGraphic, RegClick } from '@/filters/RMapUitl.js' import { queryWaterwayList, queryWaterwayPointList, waterInfomationList } from '@/api/base/waterway' import { debounce, getTableHeight } from '@/utils' import { queryNodeList } from '@/api/base/node' import { queryChannelTypeList, queryChannelFullList, queryChannelAdd, queryChannelEdit, queryChannelDelete } from '@/api/base/channel' import { fetchSelectData, getCoordinate, addWaterStation, getWaterStation, updateWaterStation, getUpload, deletePicByid, fetchCjjmDetail } from '@/api/water/waterStation.js' import {getToken} from '@/utils/auth' // 验权 export default { name: 'channel_page', directives: { waves }, components: { MapBox }, data() { return { visibleBtnAdd: true, visibleBtnEdit: true, visibleBtnDelete: true, formSearch: { type: undefined, value: '', official: undefined }, formRecord: { id: null, name: '', type: null, official: false, waterway: null, startId: null, endId: null, start: null, end: null, swzId: null, remark: '', waterInfomationPicDTO: [] }, imageUpload: getUpload(), headers: {'X-Token': getToken()}, heightMain: getTableHeight(10), dataWaterway: [], dataWaterStation: [], dataType: [], dataNode: [], dataMain: [], dataTotal: 0, dataPage: 1, dataSize: 10, loadingData: false, loadingWaterway: false, visibleDialogRecord: false, disabledSelOfficial: false, actionDialogRecord: '', fullscreenLoading: false, dialogVisible: false, dialogImageUrl: '' } }, computed: { ruleRecord: () => { return { name: [ { required: true, message: '请输入水道名称', trigger: 'blur' }, { max: 30, message: '长度不得超过30个字符', trigger: 'blur' } ], type: [ { required: true, message: '请选择水道类型', trigger: 'blur' } ], waterway: [ { required: true, message: '请选择水道位置', trigger: 'blur' } ], start: [ { required: true, message: '请选择水道起点', trigger: 'blur' } ], end: [ { required: true, message: '请选择水道讫点', trigger: 'blur' } ], swzId: [ { required: true, message: '请选择水位站', trigger: 'blur' } ], remark: [ { max: 100, message: '长度不得超过100个字符', trigger: 'blur' } ] } }, dataRecordTitle: () => { return { add: '新增水道', edit: '编辑水道' } } }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHanlder) }, mounted() { this.__resizeHanlder = debounce(() => { this.heightMain = getTableHeight(10) }, 100) window.addEventListener('resize', this.__resizeHanlder) this.loadMain() queryChannelTypeList(null, result => { this.dataType = result }) this.dataWaterway = [] queryWaterwayList(null, result => { if (result) { for (const i in result) { const record = result[i] queryWaterwayPointList({ 'waterway': record.id }, ((me, polyline) => { return result => { if (result) { for (const i in result) { const record = result[i] if (polyline.geometry.length > 0) { polyline.geometry += '#' } polyline.geometry += record.long + ',' + record.lat } } me.dataWaterway.push(polyline) } })(this, { 'id': record.id, 'xtype': 'polyline', 'style': { 'stype': 'lineSymbol' }, 'geometry': '' })) } } }), // 新建水道->水位站选项数据获取 waterInfomationList(null, result => { if (result) { this.dataWaterStation = result } }) }, methods: { // 上传照片之前判断是否符合格式要求 beforeAvatarUpload(file) { // 照片格式 const picArr = ['image/jpeg', 'image/JPEG', 'image/png', 'image/PNG'] // 照片大小 const isLt2M = file.size / 1024 / 1024 < 2 // 一次上传照片数量 const maxLength = this.formRecord.waterInfomationPicDTO.length < 5 if (picArr.indexOf(file.type) < 0) { this.$message.error('上传图片只能是 JPG 或者 PNG 格式!') return false } if (!maxLength) { this.$message.error('图片最多只能上传五张!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } this.imgLoading = true }, // 上传照片成功 handleAvatarSuccess(res) { if (res.status) { const urlObj = {} urlObj.url = res.imageUrl this.formRecord.waterInfomationPicDTO.push(urlObj) this.imgLoading = false } }, // 删除照片 handleRemove(file, fileList) { deletePicByid(file.id).then(() => { }) this.formRecord.waterInfomationPicDTO = fileList }, // 放大图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, beforeClose() { this.$refs.formRecord.resetFields() this.actionDialogRecord = '' this.disabledSelOfficial = false this.formRecord.id = null this.formRecord.name = '' this.formRecord.type = null this.formRecord.official = false this.formRecord.waterway = null this.formRecord.startId = null this.formRecord.endId = null this.formRecord.swzId = null this.formRecord.remark = '' }, resetSearch() { this.formSearch.type = undefined this.formSearch.value = '' this.formSearch.official = undefined this.dataPage = 1 }, loadNode() { debugger const param = {} if (this.formRecord.waterway !== null) { param.waterway = this.formRecord.waterway } queryNodeList(param, result => { this.dataNode = result }, null, () => { if (this.formRecord.start) { this.formRecord.startId = this.formRecord.start } if (this.formRecord.end) { this.formRecord.endId = this.formRecord.end } this.formRecord.start = null this.formRecord.end = null for (const i in this.dataNode) { const node = this.dataNode[i] if (this.formRecord.startId && node.id === this.formRecord.startId) { this.formRecord.start = node.id } if (this.formRecord.endId && node.id === this.formRecord.endId) { this.formRecord.end = node.id } } }) }, loadMain() { this.loadingData = true const param = {} if (this.formSearch.type) { param.type = this.formSearch.type } if (this.formSearch.value) { param.value = this.formSearch.value } if (this.formSearch.official) { param.isOfficial = this.formSearch.official } queryChannelFullList(param, this.dataPage, this.dataSize, (data, total) => { if (data) { this.dataMain = data } else { this.dataMain = [] } if (total) { this.dataTotal = total } else { this.dataTotal = this.dataMain.length } }, null, () => { this.loadingData = false }) }, formatOfficial(row, column) { const value = row[column.property] if (value === undefined || value === null) { return '' } else { if (value === true || value === 'true' || value === '1') { return '正式水道' } else { return '测试水道' } } }, handleMapReady() { this.loadingWaterway = true addGraphicsLayer({ 'type': 'GraphicsLayer', 'layerid': 'WaterwayLayer' }, (me => { return layer => { RAddListGraphic(layer, me.dataWaterway) RegClick(layer, me.handleMapLineClick) } })(this)) this.loadingWaterway = false }, handleMapLineClick(evt) { this.formRecord.waterway = evt.graphic.attributes.id this.loadNode() }, handleAdd() { this.loadNode() this.actionDialogRecord = 'add' this.visibleDialogRecord = true }, handleEdit(r) { this.disabledSelOfficial = true this.formRecord.id = r.id this.formRecord.name = r.name this.formRecord.type = r.typeId this.formRecord.official = r.isOfficial //this.formRecord.waterway = r.waterwayId this.formRecord.startId = r.startId this.formRecord.endId = r.endId this.formRecord.remark = r.remark this.loadNode() this.actionDialogRecord = 'edit' this.visibleDialogRecord = true }, handleDelete(r) { this.$confirm('确认删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.fullscreenLoading = true queryChannelDelete({ 'id': r.id }, () => { this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) }, null, () => { this.fullscreenLoading = false }) }) }, handlePageSizeChange(v) { this.dataSize = v this.loadMain() }, handlePageCurrentChange(v) { this.dataPage = v this.loadMain() }, handleSave() { this.$refs.formRecord.validate((valid) => { if (valid) { const param = { 'name': this.formRecord.name, 'type': this.formRecord.type, 'waterway': this.formRecord.waterway, 'start': this.formRecord.start, 'end': this.formRecord.end, 'swzId': this.formRecord.swzId, 'sdzp': this.formRecord.waterInfomationPicDTO } if (this.formRecord.remark) { param['remark'] = this.formRecord.remark } const done = () => { this.handleCancel() this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) } const always = () => { this.fullscreenLoading = false } this.fullscreenLoading = true switch (this.actionDialogRecord) { case 'add': param['isOfficial'] = this.formRecord.official queryChannelAdd(param, done, null, always) break case 'edit': param['id'] = this.formRecord.id param['waterway'] = 0 queryChannelEdit(param, done, null, always) break default: always() } } else { return false } }) }, handleCancel() { this.beforeClose() this.visibleDialogRecord = false }, handleClose(done) { this.beforeClose() done() } } } </script>

关于vue项目报错:this relative module was not found

``` This relative module was not found: * ./vue-temp/vue-editor-bridge in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/views/useCarDetail.vue ``` 有没有大佬知道是什么原因

vue.js 每次使用router.addRoutes 报错TypeError: routes.forEach is not a function 什么情况

```router.beforeEach((to, from, next) => { if (to.path.startsWith('/login')) { window.localStorage.removeItem('access-user') next() } else { let user = localStorage.getItem('access-user') if (!user) { next({path: '/login'}) } else { next() } } }) let route = { routes: [{ path: '/MenuGroup', component: (resolve) => require(['../components/Home'], resolve) }] } router.addRoutes(route) export default router ```![图片说明](https://img-ask.csdn.net/upload/201811/07/1541582047_249247.png)

vue 无法向data中的数组中push

``` new Vue({ el: "#adminDiv", data: { admins: [], id: null, aname: null, pwd: null }, created: function () { alert("loadList"); $.get("admin/load").success(function (list) { alert(list.length); for(var i=0;i<list.length;i++){ alert(list[i].aname); this.admins.push(list[i]); } }) }, ``` list里面数据是正确的,但是无法push到data里的数组中,不知道是为什么求教 这里push会报错 ![图片说明](https://img-ask.csdn.net/upload/201905/22/1558489926_454576.png)

用的UI框架是ant design of vue,this.form.setFieldsValue如果要设置数组怎么设置

let obj={ name:data.label, property:'Header', propertyType:'', execute:[ {t:'',v:''} ] } this.model = Object.assign({}, obj) this.$nextTick(()=>{ setTimeout(() => { _this.form.setFieldsValue(_.pick(_this.model, 'name', 'property','propertyType','execute')); _this.form.getFieldValue('execute') }) }); 用的UI框架是ant design of vue,execute是个数组,这块设置它的setFieldsValue,一直报错You cannot set a form field before rendering a field associated with the value

用vue的this.$http进行ajax操作,http环境下可以,https环境下就报错,应该怎么解决??

用vue的this.$http.get和this.$http.post进行ajax操作,http环境下没问题,https环境下就报错,应该怎么解决??查了一下似乎是跨域的问,具体应该怎么解决?

关于vue.js中data里面数组和对象的理解和显示问题

我mock.js造假数据后,返回给页面 ``` Object config: {url: "/params/equipments/tvmView", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …} data: Array(4) 0: {__ob__: Observer} 1: {__ob__: Observer} 2: {__ob__: Observer} 3: {__ob__: Observer} length: 4 __ob__: Observer {value: Array(4), dep: Dep, vmCount: 0} __proto__: Array ``` 如图,返回的是一个对象,里面的data是一个数组,数组里面包含四个对象 ``` data: Array(4) 0: tvmfrom: "AC" tvmto: Array(3) 0: "彩虹岛" 1: "铁皮屋" 2: "外婆饼店" ``` 我设定的是两个tvmfrom 和tvmto,其中的tvmto是一个数组,之前一个数组的时候我是 ``` data(){ return{ tableData: [], tvmToStation:[], } }, getTvmViewParams(){ this.$axios.params.getParams().then(res=>{ this.tableData = res.data this.tvmToStation = res.data[0].tvmto //this.tvmToStation = JSON.stringify(res.data) //数组深拷贝 得到的是数组[{}] //console.log(JSON.parse(JSON.stringify(res.data))) }) }, 然后放到我表格中 <el-table-column prop="tvmfrom" label="起始站" > </el-table-column> <el-table-column label="目标站点"> <!-- <template slot-scope="scope" > <el-tag>{{scope.row.tvmto}}</el-tag> </template> --> <el-tag v-for="index in tvmToStation" :key="index">{{index}}</el-tag> </el-table-column> ``` 这样写肯定是错的,tvmfrom的我是直接用prop绑定 那我怎么去获取tvmto的数组数据,遍历放到tag中 效果是 ![图片说明](https://img-ask.csdn.net/upload/201910/11/1570774027_813447.png)

刚开始接触vuex,login.vue文件中this.$store.state.token,总是报错——无法解析$store

我想实现一个登录功能,在login.vue文件下面 ``` if (this.$store.state.token) { that.$router.push('/'); console.log(this.$store.state.token); } else { that.$router.replace('/login'); } ``` 这里的this.$store一直提示无法解析,可我该引入的都引入了呀,实在不知道为什么会出这种错误,望各位大神帮帮我 store.js文件 ``` import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { token: localStorage.getItem('token') ? localStorage.getItem('token') : '', //token }; export default new Vuex.Store({ state, getters: { getStorage(state) { if (!state.token) { state.token = JSON.parse(localStorage.getItem(key)); } return state.token } }, mutations: { setToken(state, token) { state.token = token.value; localStorage.setItem("token", token.token); }, deleteToken(state) { state.token = ""; localStorage.removeItem("token") } } }) ``` main.js ``` import store from './store'; ////////////////// //中间代码省略了 ///////////////// new Vue({ el: '#app', store, router: router, render: h => h(App) }); ``` login.vue ``` import {mapMutations} from 'vuex'; export default { name: "login", data: function () { return { loginText: '用户登录', account: '', password: '', value: '', single: false }; }, methods: { ...mapMutations(['setToken']), doLogin: function () { $('#userinfo .error-note').removeClass('error-note-show'); var user = {}; user.username = this.account; user.password = this.password; const that = this; $.ajax({ url: "http://localhost:9090/auth/login", type: "POST", contentType: "application/json", dataType: "text", data: JSON.stringify(user), success: function (data, status, xhr) { var token = xhr.getResponseHeader("token"); that.setToken({token: token}); that.$router.push({path: "/"}); var storage = window.localStorage; console.log(storage.getItem("token")); if (this.$store.state.token) { that.$router.push('/'); console.log(this.$store.state.token); } else { that.$router.replace('/login'); } }, error: function (res) { console.log("返回格式错误" + res); } });} }, }, }; ```

vue.js 请求方法设置同步问题

使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 目前vue 默认为异步请求,调用的第一个方法还没有渲染完页面, 第二个方法就已经请求了,造成页面获取值为未更新之前的数据。 现在想完成的形式: 定义一个vue,6个方法中,不设置就使用异步, 有一个方法需要单独设置为执行同步。 请大神说说vue的思路。就是需要vue实现部分方法同步 【ps:想说使用ajax的或者把第二个参数写在第一个参数里边的就不用说了】

vue-router中多个router与多个函数如何分开

我想在vue中实现多个router 点击不同的router就可以执行不同的函数 该怎么弄呢

vue.js一个页面中可否有多个 new Vue({ })存在?

新手刚自学vue , 自己做项目,在一个页面中el:"body" 好像不能起作用。用body的id也不行。 这样的话一个页面中就要用到多个 ``` new Vue({ el:"", data:{ }, method:{ } }) ``` 这样的结构吗,还是有更优的写法,求路过的大神指点……

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

linux2.6.1内核源码注释

包含LINUX内核同步、信号、内存、调度、文件系统、网络系统、时钟等部分的源码注释。前后历时三年,算是干货。

Python可以这样学(第四季:数据分析与科学计算可视化)

董付国老师系列教材《Python程序设计(第2版)》(ISBN:9787302436515)、《Python可以这样学》(ISBN:9787302456469)配套视频,在教材基础上又增加了大量内容,通过实例讲解numpy、scipy、pandas、statistics、matplotlib等标准库和扩展库用法。

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

MySQL 8.0.19安装教程(windows 64位)

话不多说直接开干 目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件 3-初始化MySQL 4-安装MySQL服务 + 启动MySQL 服务 5-连接MySQL + 修改密码 先去官网下载点击的MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini文件的文件 ...

零基础学C#编程—C#从小白到大咖

本课程从初学者角度出发,提供了C#从入门到成为程序开发高手所需要掌握的各方面知识和技术。 【课程特点】 1 由浅入深,编排合理; 2 视频讲解,精彩详尽; 3 丰富实例,轻松易学; 4 每章总结配有难点解析文档。 15大章节,228课时,1756分钟与你一同进步!

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

编程实现学生基本信息管理程序

编程实现学生基本信息管理程序。学生基本信息包括:学号、姓名、性别、年龄、班级、学院、专业等。具体实现的管理功能如下: (1) 输入并显示多个学生的基本信息; (2) 可根据需要实现学生信息的添加; (

机器学习实战系列套餐(必备基础+经典算法+案例实战)

机器学习实战系列套餐以实战为出发点,帮助同学们快速掌握机器学习领域必备经典算法原理并结合Python工具包进行实战应用。建议学习顺序:1.Python必备工具包:掌握实战工具 2.机器学习算法与实战应用:数学原理与应用方法都是必备技能 3.数据挖掘实战:通过真实数据集进行项目实战。按照下列课程顺序学习即可! 课程风格通俗易懂,用最接地气的方式带领大家轻松进军机器学习!提供所有课程代码,PPT与实战数据,有任何问题欢迎随时与我讨论。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉系统全面的介绍。

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

玩转Linux:常用命令实例指南

人工智能、物联网、大数据时代,Linux正有着一统天下的趋势,几乎每个程序员岗位,都要求掌握Linux。本课程零基础也能轻松入门。 本课程以简洁易懂的语言手把手教你系统掌握日常所需的Linux知识,每个知识点都会配合案例实战让你融汇贯通。课程通俗易懂,简洁流畅,适合0基础以及对Linux掌握不熟练的人学习; 【限时福利】 1)购课后按提示添加小助手,进答疑群,还可获得价值300元的编程大礼包! 2)本月购买此套餐加入老师答疑交流群,可参加老师的免费分享活动,学习最新技术项目经验。 --------------------------------------------------------------- 29元=掌握Linux必修知识+社群答疑+讲师社群分享会+700元编程礼包。 &nbsp;

基于STM32的电子时钟设计

时钟功能 还有闹钟功能,温湿度功能,整点报时功能 你值得拥有

Python数据清洗实战入门

本次课程主要以真实的电商数据为基础,通过Python详细的介绍了数据分析中的数据清洗阶段各种技巧和方法。

Git 实用技巧

这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

计算机组成原理算法实现

计算机组成原理算法实现,能够实现定点小数的机器数表示、定点小数的变形补码加减运算、定点小数的原码一位乘法运算和浮点数的加减运算。

为linux系统设计一个简单的二级文件系统

实验目的: 通过一个简单多用户文件系统的设计,加深理解文件系统的内部功能及内部实现。 实验要求: 为linux系统设计一个简单的二级文件系统。要求做到以下几点: (1)可以实现下列几条命令(至少4条)

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

2019全国大学生数学建模竞赛C题原版优秀论文

2019全国大学生数学建模竞赛C题原版优秀论文,PDF原版论文,不是图片合成的,是可编辑的文字版。共三篇。 C044.pdf C137.pdf C308.pdf

土豆SDK(Java版)-非官方

由于土豆SDK一直建设中,最近几天抽空写了一套java的SDK。包含了现有的所有请求协议。本套SDK中仅提供了oAuth的方式(引用oAuth.net的java版示例),并没有在框架中实现,涉及到登录

Android小项目——新闻APP(源码)

Android小项目——新闻APP(源码),一个很简单的可以练手的Android Demo Ps:下载之前可以先看一下这篇文章——https://blog.csdn.net/qq_34149526/a

实用主义学Python(小白也容易上手的Python实用案例)

原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会&nbsp; 【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例

相关热词 c# 不能序列化继承类 c# char* 调用 c# 开发dll模板 c#添加控件到工具箱 c#控制台组合数 编程计算猴子吃桃问题c# c# wpf 背景透明 随机抽取号码软件c# c# 开发环境 c# 属性和字段
立即提问