Dependent dropdown with vue js (без ajax)

Question

Я пытаюсь создать зависимое выпадающее меню с помощью vue js. Я создал 2 выпадающие:

<div id="app"> 
    <div class="row"> 
     <label for="100">One</label> 
     <select v-model="val1" name="" id="100"> 
      <option value="1">one</option> 
      <option value="2">two</option> 
      <option value="3">three</option> 
     </select> 
     <div id="hide" v-if="show"> 
      <label for="200">Two</label> 
      <select name="" id="2"> 
       <option value="11">ten</option> 
       <option value="12">eleven</option> 
       <option value="13">twelve</option> 
      </select> 
     </div> 
    </div> 
</div> 

и мой вю скрипт

<script type="text/javascript"> 
new Vue({ 
    el: '#app', 
    data: { 
     value: 2, 
     val1:'', 
     show:false 
    } 
computed: { 
    showNext: function() { 
     if (this.value == this.val1) { 
     show:true 
     } 
    } 
} 
}); 
</script> 

По моему требованию, первый выпадающий должен быть виден и второй выпадающий не было показано. Он должен быть показан, если параметр со значением 2 выбран из первого раскрывающегося списка и должен оставаться скрытым, если выбрано другое значение, которое не удовлетворяет запросу if.

Но в моем случае оба раскрывающегося списка видны в начале страницы. Что может быть ошибкой?

Answer 1

Вы пропустили computed. Кроме того, я бы посоветовал использовать ===, не ==

Ваш computed должен быть show:

computed: { 
    show(): { 
     if (this.value === this.val1) { 
     return true; 
     } 
    else 
     return false; 
    } 
} 

Пытаться создать быстрый JSFiddle, если проблема все еще существует, и я помогу вам это исправить.