快捷導(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)文章

vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vuex的五大核心詳細(xì)講解
這篇文章主要為大家介紹了vuex的五個(gè)核心概念和基本使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-09-09
Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue中util的工具函數(shù)實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
Vue中全局變量的定義和使用
這篇文章主要介紹了vue中全局變量的定義和使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
vue.js 微信支付前端代碼分享
下面小編就為大家分享一篇vue.js 微信支付前端代碼。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下
2021-06-06
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue項(xiàng)目中常見(jiàn)的三種文件類(lèi)型在線(xiàn)預(yù)覽實(shí)現(xiàn)(pdf/word/excel表格)
最近在項(xiàng)目中要做一個(gè)pdf在線(xiàn)預(yù)覽的功能,索性給大家整理個(gè)全面的,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常見(jiàn)的三種文件類(lèi)型在線(xiàn)預(yù)覽實(shí)現(xiàn)的相關(guān)資料,文件類(lèi)型分別是pdf/word文件/excel表格,需要的朋友可以參考下
2022-05-05
electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能及實(shí)現(xiàn)代碼
這篇文章主要介紹了electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能,需要的朋友可以參考下
2018-11-11