欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue select 綁定動態(tài)變量的實例講解

 更新時間:2020年10月22日 14:52:13   作者:haonanElva  
這篇文章主要介紹了Vue select 綁定動態(tài)變量的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

概述

根據(jù)后臺的數(shù)據(jù)生成多個select,由于數(shù)據(jù)的數(shù)量不定,所以v-model綁定的變量名也不定。所以通過數(shù)據(jù)的id或者下標(biāo)進(jìn)行變量拼接。頁面能夠成功渲染,但是當(dāng)進(jìn)行下拉框的選值時,組件不刷新,選中的結(jié)果并沒有展示

Code

<div v-for="(item, index) in tagAllDate" :key="index">
    <el-form-item :label="item.name">
     <el-select v-model="editData['line_' + index]" multiple placeholder="請選擇" style="width: 100%;">
      <el-option v-for="(itemO, o) in item.sub_list" :key="o" :label="itemO.name" :value="itemO.tag_id"></el-option>
     </el-select>
    </el-form-item>
   </div>

editdata是聲明的對象

editData:{},

由于我們需要進(jìn)行變量的動態(tài)拼接,所以不能使用“對象.屬性”這種語法,使用中括號[]可以方便我們進(jìn)行屬性名的動態(tài)拼接。因為屬性名并不能提前知道,所以editData中不能提前聲明變量。而這就是問題的關(guān)鍵所在。

問題

由于v-model綁定的值沒有聲明,所以組件渲染后,當(dāng)進(jìn)行下拉選擇時,選項的值并沒有顯示在組件中。但是輸出結(jié)果時,值已經(jīng)被選中了。也就是說,能夠選到值,但頁面上組件無響應(yīng)。

如果假定我們拼接的id為[1,2,3] ,所以變量名為line_1, line_2, line_3 。在editData中依次聲明這些變量后,組件顯示正常。

結(jié)論

el-select組件需要綁定明確的變量,如果變量沒有提前聲明,則組件選擇時界面將會無響應(yīng)。

解決方案

tagAll() {
    this.loading = true;
    tagAll().then(response => {
     if(response.ret == 0) {
      response.data.forEach( (item, index)=>{
        this.$set(this.editData, "line_" + index, [])
      });
      this.tagAllDate = response.data;
     } else {
      this.$message.error(response.res_info);
     }
     this.loading = false
    })
   },

按照官方說明,在初始化的時候,會生成屬性的getter、setter。通過setter函數(shù)的調(diào)用,從而觸發(fā)組件更新。而直接賦值,并沒有setter函數(shù)的觸發(fā)。

另一個問題,

editData是動態(tài)的,里面的 line_ 也是動態(tài)的,如何去獲取這些信息呢

對象是editDate。但是里面的line_0 是動態(tài)創(chuàng)建的,就是說,editDate里面有多少的數(shù)據(jù)不知道,可能是:line_0 line_1 line_2 然后這些每一個都是數(shù)組,現(xiàn)在要拿到這些所有的數(shù)組里面的數(shù)據(jù)。

做法

首先循環(huán)這個對象拿到所有的Key的值,就是 line_0 line_1 這些key

for(var a in this.editData){
 console.log(a);
}

拿到key之后便可以直接根據(jù)動態(tài)的key拿到數(shù)組循環(huán)拿相應(yīng)的值

for(var a in this.editData){
     this.editData[a].forEach( (item, index) => {
      console.log(item)
     });
    }

補充知識:vue-element-admin使用常見問題

一、vue-element-admin添加快捷導(dǎo)航

這個組件是基于vue-i18n因此,首先在項目中安裝i18n

npm install --save vue-i18n

然后main.js中引入

import i18n from './lang' // Internationalization

然后注意src下邊lang文件夾的引入。之后在layout文件夾中,添加組件:tags-view 就可以了。

二、去掉Mock使用真實數(shù)據(jù)。

main.js中找到,mock的引入直接注釋掉,就好了。所有的接口請求都在 api 下邊

以上這篇Vue select 綁定動態(tài)變量的實例講解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue實現(xiàn)簡易翻頁效果源碼分享

    Vue實現(xiàn)簡易翻頁效果源碼分享

    本文給大家分享了vue實現(xiàn)簡易翻頁效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-11-11
  • Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解

    Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解

    Echarts,它是一個與框架無關(guān)的 JS 圖表庫,但是它基于Js,這樣很多框架都能使用它,例如Vue,估計IONIC也能用,因為我的習(xí)慣,每次新嘗試做一個功能的時候,總要新創(chuàng)建個小項目,做做Demo
    2022-09-09
  • Vue收集表單數(shù)據(jù)和過濾器總結(jié)

    Vue收集表單數(shù)據(jù)和過濾器總結(jié)

    這篇文章主要介紹了Vue收集表單數(shù)據(jù)和過濾器的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • vue開發(fā)中的base和publicPath的區(qū)別

    vue開發(fā)中的base和publicPath的區(qū)別

    本文主要介紹了vue開發(fā)中的base和publicPath的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-07-07
  • 聊聊Vue中provide/inject的應(yīng)用詳解

    聊聊Vue中provide/inject的應(yīng)用詳解

    這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼

    vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼

    這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • vue時間線組件的使用方法

    vue時間線組件的使用方法

    這篇文章主要為大家詳細(xì)介紹了vue時間線組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue如何使用原生video標(biāo)簽播放視頻

    vue如何使用原生video標(biāo)簽播放視頻

    這篇文章主要介紹了vue如何使用原生video標(biāo)簽播放視頻問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue?codemirror實現(xiàn)在線代碼編譯器效果

    vue?codemirror實現(xiàn)在線代碼編譯器效果

    這篇文章主要介紹了vue-codemirror實現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-12-12
  • 如何在ElementUI的上傳組件el-upload中設(shè)置header

    如何在ElementUI的上傳組件el-upload中設(shè)置header

    這篇文章主要介紹了如何在ElementUI的上傳組件el-upload中設(shè)置header,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論