vue element 常见问题

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

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

 // 数据
 data() {
   return {
     ossData: {
       signature: ''
     }
   }
 }
 
 //  正确用法
 this.$set(this.ossData, "signature", 222)　
 
 //  错误用法
 this.ossData.signature = 24

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

:append-to-body="true"

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

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

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

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

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

5.vue引用jquery

1:  npm i jquery

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

 resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     '@': resolve('src')
   }
 },
 plugins: [
   new VueLoaderPlugin(),
 //  jquery开始
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
   })
 // jquery结束
 ],

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 数组／对象的默认值应当由一个工厂函数返回

 propE: {
   type: Object,
   default: function () {
     return {}
   }
 }

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属性的使用方法及注意事项

 // html
 <ul>
     <li v-for="item in people" ref="refContent">{{item}}</li>
 </ul>
 
 // js
 data: {
  people:['三姑','四婶','五叔','六姨','七舅姥爷']
 },
 created: function() {
  this.$nextTick(() => {
 　　//  refContent: 存在n个
   console.log(this.$refs.refContent[0])
  })
 }

12. vue去除前后空格trim

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

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

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

 // 父组件
 <kind-editor :content.sync="editorText" />
 
 // 子组件
 <input v-model="editorText" />
 watch: {
   content(val) {
     this.editorText = val
   },
   editorText(val) {
     this.$emit('update:content',val)
   }
 }

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()
    })
},

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

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

（2）api

17.vue 报错 exports is not defined？

 // 修改前
 import { interNal } from '@/utils/internalReference'
 exports.install = function (Vue, options) {
   Vue.prototype.filter_rules = function(item) {
   }
 }
 
 // 修改后
 import { interNal } from '@/utils/internalReference'
 export default {
   install(Vue) {
     Vue.prototype.filter_rules = function(item) {
     }
   }}

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

（1）修改 package.json文件 增加 --host ip 重新编译即可

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

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

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文件夹

 // 由于node.js依赖问题，经常出现node_modules文件夹层次过深，从而导致windows无法直接删除。可以全局安装rimraf来解决：
 npm install rimraf -g
 
 // 用法
 rimraf node_modules

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

 <el-transfer
   ref="elTransfer"
   :titles="[$t('common.altRobot'), $t('common.selectedRobot')]"
   v-model="addEditForm.snBoundList"
   :data="updateDialog.sn"
   :filter-placeholder="$t('common.inpSNSearch')"
   filterable/>
 
 this.$nextTick(() => {
   this.$refs.elTransfer.clearQuery('left')
   this.$refs.elTransfer.clearQuery('right')
 })

25.