Блог

Главная - Вопросы по программированию - Как отключить выпадающий список выберите условно в Vue JS

Как отключить выпадающий список выберите условно в Vue JS

#javascript #vue.js #vuejs2

Вопрос:

Я изучаю vue js и пытаюсь создать группу условного ввода с помощью vue js. У меня есть 2 переключателя и 1 выпадающий выбор. Я хочу, чтобы при выборе радио 1 раскрывающийся список был включен. и когда выбрано Радио 2, выпадающий список отключен. Я сделал код, как показано ниже. Кто-нибудь может мне помочь?

 new Vue({
  el: '#app',
  data: {
    radioTypes: [
      {
         name:'Type 1', 
         value:60
      },
      {
         name:'Type 2', 
         value:70
       }
    ],
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86 wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />

<div id="app">
   <div v-for="data in radioTypes" v-bind:key="data.name">
      <input type="radio" v-model="radioVal" name="storage-type" :id="'storage' data.name.toLowerCase()" :value="data.name">
      <label :for="'storage-' data.name.toLowerCase()">{{data.name}}</label>
    </div>
  
  <div> 
      <select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>

Ответ №1:

Вам не нужно создавать вычисляемое свойство, вы можете просто проверить его вот так.

 new Vue({
  el: '#app',
  data: {
    radioVal: '',
  }
});
 
 <div id="app">
  <input type="radio" v-model="radioVal" name="radioType" value="one">
  <label for="Radio1">Radio 1</label>
  <input type="radio" v-model="radioVal" name="radioType" value="two">
  <label for="Radio1">Radio 2</label>
  
  <div>
     <!-- Disable the select when radioVal value is two --> 
      <select id="inputGroupSelect01" :disabled="radioVal === 'two'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>

Комментарии:

1. Я отредактировал фрагмент в посте выше. что делать, если у меня радио динамического типа? как он отключается в зависимости от типа радио при Type 2 выборе?

2. Вы не должны проверять radioType :disabled="radioTypes.name === 'Type 2'" , но radioVal, чтобы отключить переключатель, так как в radioVal значение будет изменено. :disabled="radioVal === 'Type 2'" .

3. о да, я понимаю

Ответ №2:

В дополнение к другому ответу, вероятно, стоит отметить, что в идеале лекарство должно быть чистым и не иметь так называемых «побочных эффектов». Это в основном означает, что вычисленный не должен изменять другие переменные, но возвращать что-то на основе других переменных (отсюда и название «вычисленный»). Итак, вот так:

 radioEnable(){
  return this.radioVal === 'one';
}

Но, как уже говорилось, здесь вам даже не нужны вычисления.

Метки: