[Vuejs]-Visible elements in options in select

by

1👍

Hard to answer your Q (Your code is missing — add code snippet).

Anyway, general outline:

v-model="selected" basic example:

https://v2.vuejs.org/v2/guide/forms.html#Select

<div id="app">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  })
</script>

v-if

Now use selected value inside v-if to show/hide paris div for example:
https://v2.vuejs.org/v2/guide/conditional.html

<div id="app">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>London</option>
    <option>Paris</option>
    <option>New York</option>
  </select>
  <span>Selected: {{ selected }}</span>

  <div v-if="selected === 'London'">
    <h2>London is the capital and largest city of England and the United Kingdom.</h2>
  </div>
  <div v-if="selected === 'Paris'">
    <h2>Paris is the capital and most populous city of France</h2>
  </div>
  <div v-if="selected === 'New York'">
    <h2>The City of New York, usually known as either New York City (NYC), is the most populous city in the United States.</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  })
</script>

v-for and data

Base on these ideas you could create more modular DRY code.
https://v2.vuejs.org/v2/guide/list.html

<div id="app">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="(item, index) in cities">
      {{ item.city }}
    </option>
  </select>

  <span>Selected: {{ selected }}</span>

  <ul v-for="(item, index) in cities">
    <li v-if="selected === item.city">
      <h2>{{ item.city }}</h2>
      <p>{{ item.descrtiption }}</p>
    </div>
  </ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data: {
      cities: [
        { city: 'London', descrtiption: "London is the capital and largest city of England and the United Kingdom."},
        { city: 'Paris', descrtiption: "Paris is the capital and most populous city of France." },
        { city: 'New York', descrtiption: "The City of New York, usually known as either New York City (NYC), or simply New York (NY), is the most populous city in the United States." }
      ],
      selected: ''
    }
  })
</script>
👤Ezra Siton

Leave a comment