2. 程式人生 > 實用技巧 >vue使用select間相互繫結

vue使用select間相互繫結

阿新 • • 發佈：2020-07-21

　　　　

讓這兩個select相互繫結，讓roleOptions選取值後，worklist彈出得是roleOptions值

<el-select v-model="postForm.projectName" placeholder="請選擇" @change="getList(postForm)"> <el-option v-for="item in roleOptions" :key="item.key" :label="item.label" :value="item.key"> </el-option> <el-select v-model="postForm" placeholder="請選擇" value-key="id" @change="getList2(postForm)">
<el-option v-for="item in worklist" :label="item.productName" :value="item"> </el-option> 首先在created裡面獲取值，設res為null，傳入getlist中； async created() { this.lastWorklist = await api_price_list({},this.queryParam); let res = null; this.getList(res) }, 然後在methods中進行判斷 methods: { async getList(res) {
　　this.listLoading = true 　　如果res為null獲取worklist 　　if(res != null){ 　this.worklist = []; 　　　如果res裡面的獲取資料為s或y則繫結不同的值 if(res.projectName == "s"){ this.lastWorklist.data.list.forEach(item => { if(item.app == res.projectName){ this.worklist.push(item); } }); } 　else if(res.projectName == "y"){
　　this.lastWorklist.data.list.forEach(item => { 　　if(item.app == res.projectName){ 　　this.worklist.push(item); 　　} 　　}); 　　} 　} this.listLoading = false }, 然後在getlist2裡面在第二個select元件進行傳值繫結 getList2(res){ if(res.app=="s"){ this.postForm.projectName = "抖音"; } else if(res.app == "y"){ this.postForm.projectName = "快手"; } },

相關推薦

vue使用select間相互繫結

　　　　 讓這兩個select相互繫結，讓roleOptions選取值後，worklist彈出得是roleOptions值

VUE--元件間v-model繫結

技術標籤：VUEvue 1、自定義指令 // 父元件-html <template> <div> <my-son v-my-model="parentValue"></my-son>

iOS--GICDataBinding | 基於NSProxy開發的資料繫結庫--支援JS表示式

簡介 GICDataBinding是一款基於NSProxy開發的資料繫結庫，支援資料繫結和事件繫結(覺得好的各位，不要吝嗇您的star)有如下特色功能：

SpringBoot使用@ConstructorBinding註解進行配置屬性繫結

SpringBoot2.2版本發行後一些新的功能也漸漸的浮出了水面，在之前版本SpringBoot的配置檔案與類之間的屬性繫結(@ConfigurationProperties)是通過Setter方法來進行繫結對應的配置值，而從2.2版本開始支援了建構函式的

SpringBoot2.2版本配置繫結是不是有點坑了？

SpringBoot版本升級相容性一直做的不是多麼的美麗，各個大分支之間由於底層使用的Srping版本不同，才導致的這種問題出現，而升級到2.2.1.RELEASE版本之後又遇到一個配置繫結的坑。

增量同步-spring batch(6)動態引數繫結與增量同步

tags：springbatch 1.引言 上一篇《便捷的資料讀寫-spring batch(5)結合beetlSql進行資料讀寫》中使用Spring Batch及BeetlSql，對資料庫讀寫元件進行資料庫同步，實際上是全量同步。全量同步的問題在於每次需要讀取

Java多型中動態繫結原理解析

這篇文章主要介紹了Java多型中動態繫結原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

SpringMVC 引數繫結意義及實現過程解析

引數繫結的定義 所謂引數繫結，簡單來說就是客戶端傳送請求，而請求中包含一些資料，那麼這些資料怎麼到達 Controller。從客戶端請求key/value資料（比如get請求中包含的資料），經過引數繫結，將key/value資料繫結到

Java使用自定義註解實現為事件源繫結事件監聽器操作示例

本文例項講述了Java使用自定義註解實現為事件源繫結事件監聽器操作。分享給大家供大家參考，具體如下：

Python中的延遲繫結原理詳解

直接看下面例子 my_ld = [lambda x:x*i for i in range(3)] my_list = [ld(2) for ld in my_ld] print(my_list)

vue.js自定義元件實現v-model雙向資料繫結的示例程式碼

我們都清楚v-model其實就是vue的一個語法糖，用於在表單控制元件或者元件上建立雙向繫結。

Vue v-bind動態繫結class例項方法

現在很多網站，都是希望動態切換class，更換css樣式。下面我們使用Vue的v-bind繫結class

vue子元件改變父元件傳遞的prop值通過sync實現資料雙向繫結(DEMO)

最近開始在用elementUI做一個後臺管理系統專案，遇到一個問題，需求是這樣，在父元件有一個按鈕，點選按鈕會顯示彈窗（子元件），在子元件中用的是elementUI 的el-diolog彈窗元件，在關閉彈窗時（elementUI自帶事件）

JS中this的4種繫結規則詳解

JS中this是什麼 理解this之前， 先糾正一個觀點，this 既不指向函式自身，也不指函式的詞法作用域。

js實現檢視和資料雙向繫結的方法分析

本文例項講述了js實現檢視和資料雙向繫結的方法。分享給大家供大家參考，具體如下：

Vue表單控制元件資料繫結方法詳解

基礎用法 可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。v-model本質上不過是語法糖，它負責監聽使用者的輸入事件以更新資料

Node實戰——繫結資料庫進行對應文章內容顯示

一、需求 點選導航欄中部落格模板裡的版權圖或帝國cms模組中的文章閱讀，能跳轉到該文章所在的頁面中

原生javascript實現類似vue的資料繫結功能示例【觀察者模式】

本文例項講述了原生javascript實現類似vue的資料繫結功能。分享給大家供大家參考，具體如下：

vue學習筆記之給元件繫結原生事件操作示例

本文例項講述了vue學習筆記之給元件繫結原生事件操作。分享給大家供大家參考，具體如下：

Python類的繫結方法和非繫結方法例項解析

一、繫結方法 　　1.物件的繫結方法 　　首先我們明確一個知識點，凡是類中的方法或函式，預設情況下都是繫結給物件使用的。下面，我們通過例項，來慢慢解析繫結方法的應用。