vue工程使用子组件使用$emit调用父组件方法失败

触发点击事件后,控制台没有错误提示
触发点击事件后,控制台没有错误提示
图片说明
图片说明

2个回答

猜测可能
1.你子组件的this指向对么?
2.你向父组件传的参数对么?
3.你父组件写了choosemeida这个方法了么?

失败请你把报错贴出来啊

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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 父组件调不到子组件的方法是怎么回事啊?
我子组件有这么一个方法 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578280082_781901.png) 父组件调用 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578280148_683051.png) 第一个打印出来了 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578280177_801344.png) 第二个报错 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578280190_499099.png)
vue父组件高度高于子组件?
![图片说明](https://img-ask.csdn.net/upload/201806/01/1527841375_75197.png) vue父组件点击显示子组件,但父组件高度超过视口高度, 所以子组件显示时,会有高度滚动,也就是父组件的高度。 这是样式的问题吗,怎么破??
vue工程中$emit()无法调用
子组件代码 ``` <template> <div> <!--查询表单--> <el-form :model="params"> 标签: <el-input v-model="params.tag" style="width:160px"></el-input> 原始名称: <el-input v-model="params.fileName" style="width:160px"></el-input> 处理状态: <el-select v-model="params.processStatus" placeholder="请选择处理状态"> <el-option v-for="item in processStatusList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> <br/> <el-button type="primary" v-on:click="query" size="small">查询</el-button> <router-link class="mui-tab-item" :to="{path:'/upload'}"> <el-button type="primary" size="small" v-if="ischoose != true">上传文件</el-button> </router-link> </el-form> <!--列表--> <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column type="index" width="30"> </el-table-column> <el-table-column prop="fileOriginalName" label="原始文件名称" width="220"> </el-table-column> <el-table-column prop="fileName" label="文件名称" width="220"> </el-table-column> <el-table-column prop="fileUrl" label="访问url" width="260"> </el-table-column> <el-table-column prop="tag" label="标签" width="100"> </el-table-column> <el-table-column prop="fileSize" label="文件大小" width="120"> </el-table-column> <el-table-column prop="processStatus" label="处理状态" width="100" :formatter="formatProcessStatus"> </el-table-column> <el-table-column prop="uploadTime" label="创建时间" width="110" :formatter="formatCreatetime"> </el-table-column> <el-table-column label="开始处理" width="100" v-if="ischoose == true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理 </el-button> </template> </el-table-column> <el-table-column label="选择" width="80" v-if="ischoose != true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="choose(scope.row)">选择</el-button> </template> </el-table-column> </el-table> <!--分页--> <el-col :span="24" class="toolbar"> <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size" :total="total" :current-page="this.params.page" style="float:right;"> </el-pagination> </el-col> </div> </template> <script> import * as mediaApi from '../api/media' import utilApi from '@/common/utils'; import * as courseApi from '../api/course' export default{ props: ['ischoose'], data(){ return { params:{ page:1,//页码 size:10,//每页显示个数 tag:'',//标签 fileName:'',//文件名称 processStatus:''//处理状态 }, listLoading:false, list:[], total:0, processStatusList:[] } }, methods:{ formatCreatetime(row, column){ var createTime = new Date(row.uploadTime); if (createTime) { return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss'); } }, formatProcessStatus(row,column){ var processStatus = row.processStatus; if (processStatus) { if(processStatus == '303001'){ return "处理中"; }else if(processStatus == '303002'){ return "处理成功"; }else if(processStatus == '303003'){ return "处理失败"; }else if(processStatus == '303004'){ return "无需处理"; } } }, choose(mediaFile){ if(mediaFile.processStatus !='303002' && mediaFile.processStatus !='303004'){ this.$message.error('该文件未处理,不允许选择'); return ; } if(!mediaFile.fileUrl){ this.$message.error('该文件的访问url为空,不允许选择'); return ; } /*let teachplanMedia ={} teachplanMedia.mediaId =mediaFile.fileId; teachplanMedia.mediaFileOriginalName =mediaFile.fileOriginalName; teachplanMedia.mediaUrl =mediaFile.fileUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } })*/ //调用父组件的choosemedia方法 this.$emit('choosemedia',mediaFile.fileId,mediaFile.fileOriginalName,mediaFile.fileUrl); }, changePage(page){ this.params.page = page; this.query() }, process (id) { console.log(id) mediaApi.media_process(id).then((res)=>{ console.log(res) if(res.success){ this.$message.success('开始处理,请稍后查看处理结果'); }else{ this.$message.error('操作失败,请刷新页面重试'); } }) }, query(){ mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{ console.log(res) this.total = res.queryResult.total this.list = res.queryResult.list }) } }, created(){ //默认第一页 this.params.page = Number.parseInt(this.$route.query.page||1); }, mounted() { //默认查询页面 this.query() //初始化处理状态 this.processStatusList = [ { id:'', name:'全部' }, { id:'303001', name:'处理中' }, { id:'303002', name:'处理成功' }, { id:'303003', name:'处理失败' }, { id:'303004', name:'无需处理' } ] } } </script> <style> </style> ``` 父组件代码 ``` <template> <div> <el-button type="primary" @click="teachplayFormVisible = true">添加课程计划</el-button> <el-tree :data="teachplanList" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> <el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible" > <el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;" :rules="teachplanRules" > <el-form-item label="上级结点" > <el-select v-model="teachplanActive.parentid" placeholder="不填表示根结点"> <el-option v-for="item in teachplanList" :key="item.id" :label="item.pname" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="章节/课时名称" prop="pname"> <el-input v-model="teachplanActive.pname" auto-complete="off"></el-input> </el-form-item> <el-form-item label="课程类型" > <el-radio-group v-model="teachplanActive.ptype"> <el-radio class="radio" label='1'>视频</el-radio> <el-radio class="radio" label='2'>文档</el-radio> </el-radio-group> </el-form-item> <el-form-item label="学习时长(分钟) 请输入数字" > <el-input type="number" v-model="teachplanActive.timelength" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="排序字段" > <el-input v-model="teachplanActive.orderby" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="章节/课时介绍" prop="description"> <el-input type="textarea" v-model="teachplanActive.description" ></el-input> </el-form-item> <el-form-item label="状态" prop="status"> <el-radio-group v-model="teachplanActive.status" > <el-radio class="radio" label="0" >未发布</el-radio> <el-radio class="radio" label='1'>已发布</el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" v-on:click="addTeachplan">提交</el-button> <el-button type="primary" v-on:click="resetForm">重置</el-button> </el-form-item> </el-form> </el-dialog> <el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible"> <media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list> </el-dialog> </div> </template> <script> let id = 1000; import * as courseApi from '../../api/course'; import utilApi from '../../../../common/utils'; import * as systemApi from '../../../../base/api/system'; import mediaList from '@/module/media/page/media_list.vue'; export default { components:{ mediaList }, data() { return { mediaFormVisible:false, teachplayFormVisible:false,//控制添加窗口是否显示 teachplanList : [{ id: 1, pname: '一级 1', children: [{ id: 4, pname: '二级 1-1', children: [{ id: 9, pname: '三级 1-1-1' }, { id: 10, pname: '三级 1-1-2' }] }] }], defaultProps:{ children: 'children', label: 'pname' }, teachplanRules: { pname: [ {required: true, message: '请输入课程计划名称', trigger: 'blur'} ], status: [ {required: true, message: '请选择状态', trigger: 'blur'} ] }, teachplanActive:{}, teachplanId:'' } }, methods: { //选择视频,打开窗口 choosevideo(data){ //得到当前的课程计划 this.teachplanId = data.id // alert(this.teachplanId) this.mediaFormVisible = true;//打开窗口 }, //保存选择的视频 choosemedia(mediaId, fileOriginalName, mediaUrl){ alert(111) //保存视频到课程计划表中 let teachplanMedia ={} teachplanMedia.mediaId =mediaId; teachplanMedia.mediaFileOriginalName =fileOriginalName; teachplanMedia.mediaUrl =mediaUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } }) }, //提交课程计划 addTeachplan(){ //校验表单 this.$refs.teachplanForm.validate((valid) => { if (valid) { //调用api方法 //将课程id设置到teachplanActive this.teachplanActive.courseid = this.courseid courseApi.addTeachplan(this.teachplanActive).then(res=>{ if(res.success){ this.$message.success("添加成功") //刷新树 this.findTeachplan() }else{ this.$message.error(res.message) } }) } }) }, //重置表单 resetForm(){ this.teachplanActive = {} }, append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, edit(data){ //alert(data.id); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); }, renderContent(h, { node, data, store }) { return ( <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"> <span> <span>{node.label}</span> </span> <span> <el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button> </span> </span>); }, findTeachplan(){ this.teachplanList = [] //查询课程计划 courseApi.findTeachplanList(this.courseid).then(res=>{ if(res && res.children){ this.teachplanList = res.children; } }) } }, mounted(){ //课程id this.courseid = this.$route.params.courseid; //查询课程计划 this.findTeachplan() } } </script> <style> </style> ``` 在子组件想用这个方法调用父组件中方法,但无法调用,控制台上也没提示.后来发现,在webstorm中按着Ctrl键追踪不到.鼠标放上去提示Unresolved function or method $emit()
vue 父组件向子组件传值 (初学者,求助)
![图片说明](https://img-ask.csdn.net/upload/201801/03/1514973403_218326.png) 父组件点击事件发生,子组件获取父组件传来的值,computed执行了两次,第一次是undefined,我应该怎样在子组件生命周期中获取父组件传递的值呢
vue父组件夏多个子组件,子组件分别修改后其他子组件如何同步更新数据?
现在有一个课程为父组件,下面分别有 详情,教师,文件库,章节课时 等子组件。 我获取到课程数据之后父子组建传值给子组件,子组件中数据更新之后其他子组件里面数据依旧是原来数据, 比如我在课时中需要获取到文件库的数据,但是如果先在文件库组件里添加了文件,切换到章节课时 组件中获取的还是原来的组件 我该怎么做? # 代码: ## 父组件: ``` <el-tab-pane label="默认计划设置" name="默认计划设置" :style="contnetn_height"> <el-tabs type="border-card" :value="setupIndex" tab-position="left" class="corse-tabs-info" :style="contnetn_height" @tab-click="setupTab" > <el-tab-pane label="基础信息" name="基础信息" :style="contnetn_height"> <setup :setupData="setupDatas"></setup> </el-tab-pane> <el-tab-pane label="详细信息" name="详细信息" :style="contnetn_height"> <details-setup :setupData="setupDatas"></details-setup> </el-tab-pane> <el-tab-pane label="课程大纲" name="课程大纲" :style="contnetn_height"> <chapter :chapterInfo="chapterInfo"></chapter> <!-- <tree :courseData="courseDatas" v-show="courseDatas"></tree> --> </el-tab-pane> <el-tab-pane label="教师管理" name="教师管理" :style="contnetn_height"> <teachers :teacherData="teacherList"></teachers> </el-tab-pane> <el-tab-pane label="学员管理" name="学员管理" :style="contnetn_height"> <student :studentData="studentData"></student> </el-tab-pane> <el-tab-pane label="试卷批阅" name="试卷批阅" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="作业批阅" name="作业批阅" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="数据预览" name="数据预览" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="订单统计" name="订单统计" :style="contnetn_height"></el-tab-pane> </el-tabs> </el-tab-pane> ``` ## 子组件 获取到父组件数据 ``` props: { teacherData: { type: Object } }, ``` -------------------补充------------- 然后子组件向父组件传值 ``` this.$emit('success',false); ``` ``` <el-tab-pane label="课程文件" name="课程文件" :style="contnetn_height"> <file @success="getCourse"></file> </el-tab-pane> ``` 父组件中的值也更新了,但是其他子组件的值没有变化
vue父组件获取子组件数据对象
我想在父组件上获取排子组件数据对象 ``` <ct-select v-model="text" @getSearchName="getName"> <ct-option v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> </ct-option> </ct-select> ``` 在父组件`ct-select`里的`mounted`下用`this.$slots.default` 获取为`undefined`,因为`dataList`是异步获取到的 ``` //ct-select export default { mounted() { console.log(this.$slots.default) //undefined } } ``` 有什么办法可以在异步的情况下在`mounted`里能获取到子组件上的数据对象??
使用Vue.extend动态创建的组件,怎么使用v-model接出值?
使用Vue.extend动态创建的组件,怎么在组件上设置v-model接出值,并监听
vue中使用element-ui,使用路由功能时报错。
``` <script> import $ from "jquery"; import router from "vue-router"; export default { name:'app', router, components:{}, mounted(){ $(".navLeft").height($(window).height()-50); } }; </script> ``` 上面是App.vue中的js代码。 ``` <el-menu :router="true" background-color="#F5F5F5" class="el-menu-vertical-demo" default-active="1"> <el-submenu index="/user"> <template slot="title"> <i class="el-icon-user"/> <span>用户管理</span> </template> <el-menu-item-group> <el-menu-item index="/user/findAll"><i class="el-icon-setting"/>查看用户信息</el-menu-item> <el-menu-item index="/user/addUser"><i class="el-icon-setting"/>添加用户信息</el-menu-item> <el-menu-item index="/user/modifyUser"><i class="el-icon-setting"/>修改用户信息</el-menu-item> <el-menu-item index="/user/deleteUser"><i class="el-icon-setting"/>删除用户信息</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> ``` 上面是html模板,使用的是导航栏,想在导航栏中使用路由功能,但是在点击导航菜单的时候提示“element-ui.common.js”的3376行报错。 ![图片说明](https://img-ask.csdn.net/upload/202001/12/1578821090_812757.png) 请问这个该怎么解决? 网上找了好多,都不是这种的。
vue组件整体传到公共方法中
![图片说明](https://img-ask.csdn.net/upload/201909/26/1569496707_744308.png) 如图,vue定义公共方法的时候,为了方便与其他函数相互调用,把vue组件整体传到方法中,作为compent,使用,请分析利弊
前端vue,后台springboot+cloud,为什么前端没有成功调用后台controller的方法?
![图片说明](https://img-ask.csdn.net/upload/202001/11/1578750590_591101.png) +++ 总的来说就是: 在创建品牌的过程中,其他方法都能成功调用,只有图片这块似乎没有反应,不知道为什么,请大神指教,谢谢。
vue中使用interceptors拦截器
vue中使用interceptors拦截器设置了请求头token,但是token的位置总是在路径的前面,这个怎么处理。
vue如何封装一个组件,实现点击新增文件夹,文件夹下可以增加子文件
可以给我一点思路嘛?现在需要实现一个入口进去后新建一个文件夹,文件夹里还可以建文件夹,里面还可以上传文件或者建子文件夹,有点像百度网盘可以新建文件夹里面传子文件夹或者文件,如图![图片说明](https://img-ask.csdn.net/upload/201912/10/1575982789_962935.png)
vue构建父组件子组件提取问题
问一下大牛们,我现在有三个页面大致的布局相同,只有几个组件或者文字不一样,怎么构建组件比较好,目前想到两种: 1. 写一个Common组件,三个页面都引入Common,通过不同的props传值,控制布局 1. 写一个父组件Common,其他三个页面extends这个父组件,在data,methods里面去控制行为。 哪种比较好,或者大神们都是怎么实现的?
关于Vue自定义组件的错误
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <fuqin></fuqin> </div> <template id="t1"> <div> 父组件, {{attr}} <erzi></erzi> </div> </template> <template id="t2"> <div> 子组件, {{attr1}} </div> </template> <script type="text/javascript"> var vm=new Vue({ el:'#app', components:{ "fuqin":{ template:"#t1", data(){ return{ attr:"父组件的数据" } } }, components:{ 'erzi':{ template:"#t2", data(){ return{ attr1:"子组件的数据" } } } } } }); </script> </body> </html> ``` 大佬帮我看看哪错了 这里是报错: [Vue warn]: Unknown custom element: <erzi> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Fuqin> <Root>
vue中echarts图无法渲染
我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图 以下为父组件代码 ``` // 父组件代码 <template> <div> <div class="leftChart"> <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph> </div> </div> </template> <script> // 引入子组件 import linegraph from "./EchartsShow.vue"; // 引入网络请求方法 import { getSumData } from "@/api/crd/orgLimitView/orgView" export default { data () { return { // echarts图基本配置项,未定义具体数据 option1: { title: { text: '授信额度结构', subtext: '行业维度', x: 'center', top: '3%' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '2%', top: '2%' }, series: [ { name: '行业', type: 'pie', radius: '55%', center: ['50%', '55%'], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }, } }, created () { this.getSum() }, methods: { getSum () { // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据 getSumData('1', '01000').then(res => { if (res.status != 200) { return this.$message.error('获取数据失败,请重试') } const datas = res.data.data // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据 this.option1.legend.data = this.tableDatas.map(item => { // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据 return this.dicInd[item.industry] }) this.option1.series[0].data = this.tableDatas.map(item => { return { value: item.approveExpAmount, name: this.dicInd[item.industry] } }) console.log(this.option1.legend.data, '行业'); console.log(this.option1.series[0].data, '行业带数据'); }) } }, components: { linegraph } } </script> ``` 以下为子组件代码 ``` // 子组件代码 <template> <div v-bind:id="id" v-bind:data="data"></div> </template> <script> import echarts from "echarts"; export default { name: "echartsShow", data () { return { ChartLineGraph: null }; }, // 深度监听 父组件刚开始没有值,只有图标的配置项 // 父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变 watch: { data: { deep: true, handler: function (newVal, oldVal) { if (newvalue) { this.drawLineGraph(this.id, newVal) } else { this.drawLineGraph(this.id, oldVal) } } } }, props: ["id", "data"], created() { console.log(this.data, '打印传递过来的图表数据') }, mounted () { this.drawLineGraph(this.id, this.data); console.log(this.id, '打印id值') console.log(this.data, '打印data值') }, methods: { drawLineGraph (id, data) { let _this = this; let myChart = document.getElementById(id); this.ChartLineGraph = echarts.init(myChart); this.ChartLineGraph.setOption(data); window.addEventListener("resize", function () { _this.ChartLineGraph.resize(); }); } }, beforeDestroy () { if (this.ChartLineGraph) { this.ChartLineGraph.clear(); } } }; </script> ``` 从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384445_959195.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384684_683561.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384616_880352.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384792_786796.png) 经过多次尝试,我遇到了一个奇怪的问题 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385072_241075.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385147_470918.png) 求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts
vue引入ts main.ts报错
vue引入ts main.ts报错: unused expression, expected an assignment or function call ``` import Vue from 'vue' import App from '@/App.vue' import router from '@/router/index.ts' new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` npm run dev 运行后 ``` WARNING Compiled with 1 warnings 11:16:22 AM warning in ./src/main.ts [8, 1]: unused expression, expected an assignment or function call ```
vue使用v-for循环直接使用方法获得的数组问题
vue使用v-for循环直接使用方法获得的数组,代码 ``` <div id="test"> <select placeholder="请选择"> <template v-for="(item,index) in getList('a')"> <option v-if="item" :label="item" :value="item"></option> </template> </select> <input v-model="str"/> </div> <script> var test = new Vue({ el:"#test", data:{ arr:{ a:[1,2,3,4], b:[5,6,7,8] }, str:"" }, methods:{ getList:function(name){ return this.arr[name] } } }) </script> ``` 像这样,只要整个test发生变化就会调用getList方法,就比如我在input输入也会调用getList,各位大神有解决方法吗
vue项目build后请求404
我前端使用vue,后端使用java开发的前后端分离的小项目。 前端完事以后用npm run dev都能正常运行。 但是使用npm run build打包后放在tomcat上访问却出问题了。 界面可以打开,资源也加载了。但是在向后端发送请求时,却报错了。我用的axios请求。 情况如下: <br> api/login:1 Failed to load resource: the server responded with a status of 404 ()app.ccf184057c98052a1cfd.js:1 Error: Request failed with status code 404 at FtD3.e.exports (vendor.b3fd7698053a850e233d.js:43) at e.exports (vendor.b3fd7698053a850e233d.js:13) at XMLHttpRequest.f.onreadystatechange (vendor.b3fd7698053a850e233d.js:19) 我搜索了一下没有什么收获。问题的关键在于后端没问题,dev也没问题,就是build不行。 求好心人指点。
相见恨晚的超实用网站
搞学习 知乎:www.zhihu.com 简答题:http://www.jiandati.com/ 网易公开课:https://open.163.com/ted/ 网易云课堂:https://study.163.com/ 中国大学MOOC:www.icourse163.org 网易云课堂:study.163.com 哔哩哔哩弹幕网:www.bilibili.com 我要自学网:www.51zxw
花了20分钟,给女朋友们写了一个web版群聊程序
参考博客 [1]https://www.byteslounge.com/tutorials/java-ee-html5-websocket-example
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
引言 本文主要是记录一下面试字节跳动的经历。 三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
这30个CSS选择器,你必须熟记(上)
关注前端达人,与你共同进步CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需...
国产开源API网关项目进入Apache孵化器:APISIX
点击蓝色“程序猿DD”关注我回复“资源”获取独家整理的学习资料!近日,又有一个开源项目加入了这个Java开源界大名鼎鼎的Apache基金会,开始进行孵化器。项目名称:AP...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
编写Spring MVC控制器的14个技巧
本期目录 1.使用@Controller构造型 2.实现控制器接口 3.扩展AbstractController类 4.为处理程序方法指定URL映射 5.为处理程序方法指定HTTP请求方法 6.将请求参数映射到处理程序方法 7.返回模型和视图 8.将对象放入模型 9.处理程序方法中的重定向 10.处理表格提交和表格验证 11.处理文件上传 12.在控制器中自动装配业务类 ...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
求小姐姐抠图竟遭白眼?痛定思痛,我决定用 Python 自力更生!
点击蓝色“Python空间”关注我丫加个“星标”,每天一起快乐的学习大家好,我是 Rocky0429,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻...一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片:是谁!是谁把我女朋友的照片放出来的!awsl!太好看了叭...等等,那个背景上的一堆鬼画符是什么鬼?!真是看不下去!叔叔婶婶能忍,隔壁老王的三姨妈的四表...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
相关热词 c# 图片上传 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd
立即提问