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.