Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
老規(guī)矩：先走波流程！
看實現(xiàn)效果，更好根據(jù)大家的問題相對應(yīng)的解決自己的問題。
功能介紹
由動圖可以看到，當(dāng)我點擊添加試題時，因為要添加些數(shù)據(jù)，跳轉(zhuǎn)過去的界面必須是可以使用的。再當(dāng)我點擊編輯，攜帶過去的數(shù)據(jù)是不能更改的，只更改下方題干部分。
具體如何實現(xiàn)控件獲得數(shù)據(jù)后不可更改呢？主要是用到判斷，可以看到這里我只給input和select組件設(shè)置了不可用，但他們都是共用一個方法。
實現(xiàn)過程
1.做判斷
因為點擊是一加載就出現(xiàn)的數(shù)據(jù)，所以是當(dāng)獲得過來的數(shù)組不等于空時執(zhí)行
//鉤子函數(shù)，初始化頁面用
created() {
this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
if (this.carryCurrentRowCode != undefined) {
// 試題分類
this.questionClassification = this.carryCurrentRowCode.questionClassifyId;
// 試題類型
this.v_type = this.carryCurrentRowCode.questionTypeId;
// 試題難度
this.v_difficulty = this.carryCurrentRowCode.degreeInitial;
// 試題編號
this.i_number = this.carryCurrentRowCode.serial;
this.statusData();
this.editNotavailable = true;
}carryCurrentRowCode,是接收過來的數(shù)組，具體如何接收可以看這篇文章
因為不可為空undefined才執(zhí)行判斷里面的數(shù)據(jù)，里面的this點不是重點，它們都是接收過來顯示到第二個界面的數(shù)據(jù)，關(guān)鍵看代碼：
this.editNotavailable = true;
2.在控件中使用editNotavailable
課程、試題分類下拉框和試題編號共用:disabled="editNotavailable"
<!-- 下拉框-課程分類 -->
<el-select
:disabled="editNotavailable"
v-model="couponSelected "
class="select_coures"
</el-select>
>
<!-- 下拉框-試題類型 -->
<el-select
:disabled="editNotavailable"
class="select_qutestions"
v-model="v_type"
@change="q_type"
>
</el-select>
<!-- 接收試題編號 -->
<el-input
v-model="i_number"
:disabled="editNotavailable"
placeholder="請輸入編號"
style="width:10%"
class="m_left"
>
</el-input>3.定義editNotavailable的初始狀態(tài)
editNotavailable: false,
課程、試題分類下拉框和試題編號共用，點擊編輯后：true不可用，false可用。正常跳轉(zhuǎn)用false表示可用，if判斷里因為是不可用的所以改為true不可用。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本文中小編給大家分享的是關(guān)于vue引入子組件方法和先關(guān)注意點，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動,Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端,下面這篇文章主要給大家介紹了關(guān)于swiper在vue中的簡單使用方法,需要的朋友可以參考下2022-09-09
可以把數(shù)據(jù)變成響應(yīng)式api的方法叫做響應(yīng)式api,下面這篇文章主要給大家介紹了關(guān)于vue3響應(yīng)式對象api的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)簡單日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時語法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
Vue實現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06