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.