vue element 常见问题

1. vue2.0 给data对象新增属性，并触发视图更新  $set

this.$set(this.ossData, "signature", 222)　　// 正确用法

 1 // 数据
 2 data() {  3   return {  4  ossData: {  5       signature: '' 
 6  }  7  }  8 }  9 
10 // 正确用法
11 this.$set(this.ossData, "signature", 222)　 12 
13 // 错误用法
14 this.ossData.signature = 24

View Code

2. el-dialog 弹出组件的遮罩层在弹出层的上面

:append-to-body="true"

3.父组件值变化子组件值变化

（1）Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？  

1 typeCode(newValue, oldValue) {　　　　//watch
2   this.$set(this.listQuery, 'typeCode', newValue) 3   this.getList() 4 }

View Code

4.axios在ie浏览器下提示promise未定义

(1) axios在ie浏览器下提示promise未定义

5.vue引用jquery

1:  npm i jquery 

2.  webpack.base.conf.js文件中，加入（这一段： new webpack.ProvidePlugin...）

 1 resolve: {  2   extensions: ['.js', '.vue', '.json'],  3  alias: {  4     '@': resolve('src')  5  }  6 },  7 plugins: [  8   new VueLoaderPlugin(),  9 // jquery开始 
10   new webpack.ProvidePlugin({ 11     jQuery: "jquery", 12     $: "jquery"
13  }) 14 // jquery结束
15 ],

View Code

3: import $ from 'jquery

4: end

 6.对话框el-dialog关闭事件（包括右上角的x）

<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'></el-dialog>

7. props default 数组／对象的默认值应当由一个工厂函数返回

1 propE: { 2  type: Object, 3   default: function () { 4     return {} 5  } 6 }

View Code

8.vue中使用 ztree

参考：   ztree在Vue2.5.2下面的运用实战

9.使用element el-date-picker 插件选取时间不回填 

选取时间不回填是由于你的数据属性没有事先在 data 里声明，参见   https://cn.vuejs.org/v2/guide/reactivity.html

10. v-for 须要加上 :key

11.Vue 2中ref属性的使用方法及注意事项

参考： Vue 2中ref属性的使用方法及注意事项

 1 // html
 2 <ul>
 3     <li v-for="item in people" ref="refContent">{{item}}</li>
 4 </ul>
 5 
 6 // js
 7 data: {  8  people:['三姑','四婶','五叔','六姨','七舅姥爷']  9 }, 10 created: function() { 11  this.$nextTick(() => { 12 　　// refContent: 存在n个
13   console.log(this.$refs.refContent[0]) 14  }) 15 }

View Code

12. vue去除先后空格trim

1 // 使用 trim 修饰符
2 <input type="text" v-model.trim="content">
3 
4 // 使用 filter 属性
5 <input type="text" v-model="name" />
6 <p>  {{ name | trim }}</p>　

View Code

13. 子组件和父组件双向数据绑定

vue 实现父组件和子组件之间的数据双向绑定

 1 // 父组件
 2 <kind-editor :content.sync="editorText" />
 3 
 4 // 子组件
 5 <input v-model="editorText" />
 6 watch: {  7  content(val) {  8     this.editorText = val  9  }, 10  editorText(val) { 11     this.$emit('update:content',val) 12  } 13 }

View Code

14.指定文件、指定行、指定代码块不使用 ESLint 语法检查

15.axios发送数据

uploadImg (f) { this.axios.get('./getToken').then((response) => {//获取token
    let param = new FormData(); //建立form对象
    param.append('file',f.file);//经过append向form对象添加数据
    param.append('token',response.data.token);//经过append向form对象添加数据
    param.append('key',response.data.key);//添加form表单中其余数据
    let config = { headers:{'Content-Type':'multipart/form-data'} }; //添加请求头
    this.axios.post(f.action,param,config)//上传图片
      .then(response=>{ onSuccess(response.data) }) .catch(({err}) => { f.onError() }) }) .catch(() => { f.onError() }) },

View Code

16.vue项目的多语言/国际化插件vue-i18n详解

（1）vue项目的多语言/国际化插件vue-i18n详解

（2）api

17.vue 报错 exports is not defined？

 1 // 修改前
 2 import { interNal } from '@/utils/internalReference'
 3 exports.install = function (Vue, options) {  4   Vue.prototype.filter_rules = function(item) {  5  }  6 }  7 
 8 // 修改后
 9 import { interNal } from '@/utils/internalReference'
10 export default { 11  install(Vue) { 12     Vue.prototype.filter_rules = function(item) { 13  } 14   }}

View Code

18.  vue把localhost改为ip地址没法访问—解决方法

（1）修改 package.json文件 增长 --host ip 从新编译便可

（2）dev后面增长  --host 192.168.8.123

1 "scripts": { 2 "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.8.123", 3 "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", 4 "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js", 5 "lint": "eslint --ext .js,.vue src", 6 "test": "npm run lint", 7 "precommit": "lint-staged", 8 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
9 },

View Code

19.vue中使用 scss

<style scoped lang="scss"></style>

20. vue 关闭 eslint 

 Use // eslint-disable-next-line to ignore the next line.

21.  Vue Elementui Form表单验证  filter_rules

22.  Vue调试神器vue-devtools安装

23.  删除node_modules文件夹

1 // 因为node.js依赖问题，常常出现node_modules文件夹层次过深，从而致使windows没法直接删除。能够全局安装rimraf来解决：
2 npm install rimraf -g 3 
4 // 用法
5 rimraf node_modules

View Code

24. 清除穿梭框里的搜索值

 1 <el-transfer  2   ref="elTransfer"
 3   :titles="[$t('common.altRobot'), $t('common.selectedRobot')]"
 4   v-model="addEditForm.snBoundList"
 5   :data="updateDialog.sn"
 6   :filter-placeholder="$t('common.inpSNSearch')"
 7   filterable/>
 8 
 9 this.$nextTick(() => { 10   this.$refs.elTransfer.clearQuery('left') 11   this.$refs.elTransfer.clearQuery('right') 12 })

View Code

 

25.