;

1.错误做法,添加进的所有数据会一模一样 <input v-model="newItem.question"/> data () { return { questionlist: [], newItem: { question: ”, items: [‘不愿意参加’, ‘配合参加’, ‘即使只要’] } } } methods: { add () { this.questionlist.push(this.newItem) } } 2.正确做法 <input v-model="newQuestion"/> data () { return { questionlist: [], newQuestion: ”, newItems: [‘不愿意参加’, ‘配合参加’, ‘即使只要’] } } add () { var obj = {} obj.question = this.newQuestion obj.items = this.newItems this.questionlist.push(obj) }

vue数组添加元素 2018年5月20日
;

1.问题描述 单纯使用localStorage存取参数,在页面跳转后有时候无法及时获取到参数 单纯使用route.params可以即时获取参数,但是页面刷新后,参数会丢失 2.结合两种方式的方案 父组件中传递参数 localStorage.setItem("userId", userId); this.$router.push({name:’detail’,params:{userId:userId}}); 子组件获取参数 let userId=localStorage.userId?localStorage.userId:this.$route.params.userId; 另一种方案:通过$router.query this.$router.push({name:’detail’,query:{userId:userId}}); 这样参数会出现在url中,观感欠佳 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。 在路由配置文件中定义参数: path: ‘/patient/record_detail’, name: ‘record_detail’, component: r…

localStorage配合route.params实现参数的时效性及持久化 2018年3月27日
;

this.$ajax.get(url1) .then((res)=>{ this.$ajax.get(url2).then((res)=>{}); }) .then((res)=>{ this.$ajax.get(url3).then((res)=>{}); })

vue中ajax链式调用 2018年3月23日
;

没有有name属性,也没有checked <label><input type="radio" v-model="form.picked" value="已选中"/>已选中</label> <label><input type="radio" v-model="form.picked" value="未选中"/>未选中</label> data () { return { form: { picked: ‘未选中’ //和picked匹配的值会自动选中 } } 遇到的问题,以及解决 模板部分结构 <label><input type="radio" v-model="form.value1" value="是" />是</label> <label><input type="radio" v-model="form.value1" value="否" />否</label…

vue中input单选框radio 2018年3月20日
;

1.将bus注入到Vue根对象中 const bus = new Vue(); new Vue({ el: ‘#app’, router, template: ‘<App/>’, components: { App }, data:{ bus }  }); 2.组件A中触发事件 this.$root.bus.$emit(‘busevent’, 19); 3.组件B中监听事件 data () { return { valNow:” } }, mounted(){ let nowThis=this; this.$root.bus.$on(‘busevent’,function(val){ //此处this和当前this不同,所以在外部定义变量,以引用当前组件的this alert(val); nowThis.valNow=val; }) }

全局bus事件通信流程 2018年3月16日
;

1.父组件 <template> <div> <subcomponent :subdata="data"></subcomponent> </div> </template> <script> import subcomponent from ‘./subcomponent’ export default { name: ‘parentComponent’, components:{ ‘subcomponent’:subcomponent }, data (){ return{ data:” } } } </script> 2.子组件 <script> export default { name: ‘subcomponent’, props: [‘subData’], data (){ return{} }, watch:{ subdata:’showData’ }, methods:{ showData(){ alert(this.subdata); } } } </script> 其它:命名方式存疑

props引用流程及文件结构 2018年3月9日
;

场景:在父组件中表单提交数据,子组件中更新显示列表,子组件已经写完,再去添加prop略麻烦,尝试过location.reload()体验太差 模板部分 <recordDetail v-if="forceReload"></recordDetail> data部分 forceReload:true methods部分(表单验证成功后,先让组件消失,ajax返回成功后再让其显示) this.$validator.validateAll().then((msg)=>{ if(msg){ this.forceReload=false; //先强制组件消失 this.$ajax.get(‘/rest/admin/cases/create’) .then((res)=>{ this.forceReload=true; //强制组件再次渲染 }) .catch(function (error){}); }else{ this.$message({ message: ‘填写不完整!’, type: ‘warning’ }); } });

父组件不借助prop,暴力刷新子组件 2018年3月8日
;

<ul class="top_bar"> <li class="top_cell" v-for="cell in 5" :class="{ ‘active’: cell === selected }" @click="choose(cell)"> {{cell}} </li> </ul> new Vue({ el:’.top_bar’, data:{ selected: null }, methods:{ choose:function (index) { this.selected = index } } });

v-for对应项添加active类 2018年2月13日
;

<template> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column prop="checkUnit" label="医院名称"></el-table-column> <el-table-column prop="checkName" label="检查名称"></el-table-column> <el-table-column label="查看详情"> <template slot-scope="scope"> <el-button size="mini" @click="infoList_detial(scope.row.id)">查看详情</el-button> </template> </el-table-column> </el-table> </template…

element中table单元格点击事件获取id 2018年2月10日
;

安装: npm install –save vuex 引入: import Vuex from ‘vuex’ Vue.use(Vuex)

vuex安装 2018年2月8日
;

1.问题场景 表单页面,包含三个子组件页面,分别对应下一步,页面状态统一在父组件内管理 2.父组件代码 <step1 v-on:step="changeStep(‘step2’)" v-if="step==’step1’"></step1> <step2 v-on:step="changeStep(‘step3’)" v-if="step==’step2’"></step2> <step3 v-on:step="changeStep(‘step1’)" v-if="step==’step3’"></step3> import step1 from ‘./step1’ import step2 from ‘./step2’ import step3 from ‘./step3′ export default { name:’addFamily’, components:{ ‘step1’:step1, ‘step2’:step2, ‘step3′:step3 }, data() { return { step:’step1’ } }, methods: {…

子组件触发父组件事件 2018年2月3日
;

<div id="test"> <select v-model="selected"> <option v-for="yx in YX" :value="yx.text"> {{yx.text}} </option> </select> <select> <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false"> {{zy.text}} </option> </select> </div> new Vue({ el: ‘#test’, data: { selected: ‘计信院’, //AJAX接入数据时候,这里需要手动设置,否则报错 YX: [{ text: ‘计信院’, ZY: [{ text: ‘软件工程’ }, { text: ‘计算机科学与技术’ }, { text: "信息安全" }, ] }, { text: ‘商学院’, ZY: [{…

vue二级联动 2018年2月1日
;

1.当遍历值处于元素属性中 <div v-for="item in data"> <img :src="item.images[0].imageUrl"/> //此处为特例,images为数组,取第一个元素 <p>{{item.checkName}}</p> </div>

v-for中图片src写法 2018年1月22日
;

1.安装 cnpm install echarts –save 2.html <template> <div class="charts"> <div id="myCharts" :style="{width:’800px’,height:’380px’}"></div> </div> </template> 3.js import echarts from ‘echarts’ export default { name: ‘myCharts’, data () { return { myCharts:”, options:{} //echarts初始配置信息 } }, mounted() { this.myCharts=echarts.init(document.getElementById(‘myCharts’)); this.myCharts.setOption(this.options); this.getchart(); }, methods:{ getchart:function(){ this.$ajax.get(‘url’) .then((reps)=>{ this.myCharts.s…

vue中使用echarts 2018年1月19日
;

问题描述: element表单元素加载时候控制台提示 [Vue warn]: The computed property "fields" is already defined in data. 错误原因: 同时引入了vee-validate和elementUI插件,他们的计算属性fields冲突了 解决方法: 修改vee-validate的fieldsBagName配置项 Vue.use(VeeValidate, { xxxx:’xxxx’, fieldsBagName: ‘veefields’ //此处默认为fields });

The computed property fields is already defined in data 2018年1月5日
;

1.安装 cnpm install element-ui -S 2.main.js中引入 import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-default/index.css’ 3.main.js中全局安装 Vue.use(ElementUI) 4.其它 cnpm update -g element-ui //更新 cnpm uninstall -g element-ui //卸载 安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。 当 install 方法被同一个插件多次调用,插件将只会被安装一次。

ElementUI安装及引用 2018年1月4日
;

方式一:全局文件内直接定义 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax 方式二:子组件内定义然后全局引入 // myfun.js 组件 exports.install = function (Vue, options) { Vue.prototype.myfun = function (){ alert(‘aaaaaaa’); }; }; // main.js 入口 import myfun from ‘./commons/myfun.js’ Vue.use(myfun); // ccc.js 子组件 this.myfun();

vue中定义全局方法 2017年12月26日
;

1.安装vee-validate cnpm install vee-validate –save 2.安装vue-i18n cnpm install vue-i18n –save 3.main.js中引入 import VeeValidate from ‘vee-validate’; import zh_CN from ‘vee-validate/dist/locale/zh_CN’ import VueI18n from ‘vue-i18n’; Vue.use(VueI18n) const i18n = new VueI18n({ locale: ‘zh_CN’, }) Vue.use(VeeValidate, { i18n, i18nRootKey: ‘validation’, dictionary: { zh_CN } }); 4.页面中使用 <input type="text" placeholder="邮箱" v-validate ="’required|email’" name="email"/> <span class="errortip" v-show="errors.has(’email’)&q…

vue表单验证,安装插件VeeValidate以及设置中文错误提示 2017年12月25日
;

1:url内存在一个’#’ 路径:router/index.js export default new Router({ mode:"history", //添加此配置选项 routes: [] }) 2.通过端口转发处理跨域 路径:config/index.js proxyTable: { ‘/api’: { target: ‘http://xxx.com’, changeOrigin: true, pathRewrite: {} }, ‘/service’:{} } 请求 this.$ajax.get(‘/api’).then(); //请求的正式地址为’http://xxx.com/api’ 注意:修改后需要重启服务,否则不生效

Vue中路由及跨域问题 2017年12月25日
;

1.安装 cnpm install axios –save 2.main.js中全局引入 import axios from ‘axios’ Vue.prototype.$ajax = axios 3.调用 this.$ajax.get(URL) .then((response)=>{ console.log(response); }) .catch((error)=>{ console.log(error); });

vue中安装axios来处理ajax 2017年12月25日
;

1.html部分 <ul v-model="menuNow" class="TabMenu clearfix"> <li class="fl" v-bind:class="{active:menuNow==’tab1′}" @click="setMenu(‘tab1′)">tab1</li> <li class="fl" v-bind:class="{active:menuNow==’tab2’}" @click="setMenu(‘tab2′)">tab2</li> <li class="fl" v-bind:class="{active:menuNow==’tab3’}" @click="setMenu(‘tab3’)">tab3</li> </ul> <div class="TabContent"> <tab1 v-if="menuNow === ‘tab1’">…

vue实现tab切换效果 2017年12月23日
;

<p> <input v-if="!showPass" type="password" v-model="password"/> <input v-if="showPass" type="text" v-model="password"/> <span v-if="!showPass" class="icon eye-slash" @click="showPass = !showPass"></span> <span v-if="showPass" class="icon eye" @click="showPass = !showPass"></span> </p> new Vue({ el: ‘body’, data: { showPass: false, password: ” } })

vue密码切换显示隐藏 2017年12月23日
;

<div id="app"> <navbar></navbar> <pagefooter></pagefooter> </div> Vue.component(‘navbar’,{ template:’#navbar’, data:function () { return { navs:[] } } }); Vue.component(‘pagefooter’,{ template:’#pagefooter’, data:function () { return { footer:” } } }); new Vue({ el:’#app’, mounted:function () { //ready, //这里怎么直接访问navbar的navs和pagefooter的footer值呢, } }) 这就用到ref了 修改组件 <div id="app"> <navbar ref="navbar"></navbar> <pagefooter ref="pagefooter"></pagefooter> </div> new …

vue中ref介绍 2017年11月8日
;

问题描述: ajax返回一个对象数组,页面内通过v-for输出,但是每个循环元素内要添加一个input输入框 提交时候,需要连同input值一起提交 初期思路 步骤: 1.直接对ajax返回的json对象数组通过for循环追加属性, 2.data变量在渲染以后结构发生变化,如何取值 解决方法: 1.ajax返回的结果先赋值给临时变量temp 2.通过for循环给temp数组内的对象添加新属性result 3.把temp赋值给projectList 表单提交时候: 通过 document.querySelectorAll(“.rusult_input”);获取到追加input的值,通过for再循环赋值 尝试改进: 1.用map函数处理数据 data.map(function(item){ item.show = false; }); 2.数据在created钩子中请求及追加 用map函数追加属性 getinfoList(){ this.$ajax.get(‘/service/check/15/LABS_CHECK?pageSize=1000’) .then((res)=>{ this.infoList=res.data.body.list; this.infoList.map(function(item){ if(…

对通过ajax返回的对象数组追加input并提交 2017年11月8日