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.