快捷導(dǎo)航

vue2 elementui if導(dǎo)致的rules判斷失效的解決方法

更新時(shí)間：2024年12月30日 10:37:02 作者：木毅01

文章討論了在使用Vue2和ElementUI時(shí),將if語(yǔ)句放在el-form-item內(nèi)導(dǎo)致rules判斷失效的問(wèn)題,并提出了將判斷邏輯移到外部的解決方案,感興趣的朋友一起看看吧

優(yōu)化目標(biāo) 和目標(biāo)轉(zhuǎn)化出價(jià)必填的切換的時(shí)候還會(huì)隱藏掉這時(shí)候的if語(yǔ)句會(huì)導(dǎo)致rules判斷失效

我的辦法是把判斷拉到外面別放在el-form-item里

<section v-if="unitForm.baseTarget === 'OCPM' && unitForm.cpaTargetOptions !== undefined && unitForm.cpaTargetOptions.length > 0">
  <el-form-item prop="cpaTarget" label="優(yōu)化目標(biāo)" required>
    <el-select 
      style="width: 300px;"
      v-model="unitForm.cpaTarget" 
      placeholder="請(qǐng)選擇優(yōu)化目標(biāo)"
      clearable
      @change="(value)=>changeCpaTarget(value)"
      >
      <el-option
        v-for="item in unitForm.cpaTargetOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
</section>
rules: { 
  cpaTarget: [
    { required: true, message: '請(qǐng)選擇優(yōu)化目標(biāo)', trigger: 'change' }
  ], 
}

到此這篇關(guān)于vue2 elementui if導(dǎo)致的rules判斷失效的文章就介紹到這了,更多相關(guān)vue2 elementui if rules判斷失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue?為什么要封裝全局組件引入
這篇文章主要介紹了vue為什么要封裝全局組件引入，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-07-07
vue3+vite使用element-plus問(wèn)題
這篇文章主要介紹了vue3+vite使用element-plus問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue2實(shí)現(xiàn)組件延遲加載的示例代碼
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下
2024-01-01
使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-08-08
基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue.js表單控件綁定示例盤(pán)點(diǎn)
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤(pán)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Vue響應(yīng)式原理的示例詳解
Vue 最獨(dú)特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。本文將通過(guò)示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下
2022-03-03
基于vue實(shí)現(xiàn)圓形菜單欄組件
這篇文章主要介紹了基于vue實(shí)現(xiàn)的圓形菜單欄組件，本文通過(guò)實(shí)例代碼，圖文詳解的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
vue3.x ref()語(yǔ)法糖賦值方式
這篇文章主要介紹了vue3.x ref()語(yǔ)法糖賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue?導(dǎo)入js中的兩種方法(示例詳解)
這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過(guò)兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07