[Vuejs]-Select Option 1 to Select Option 2 and view the result (text) in VueJs

by

0👍

This is working in VueJS (tested). I was a little off about how the b-form-select element works, but this will give you the results you need.

If you are building the options manually, maybe just make a JSON file or a Component that returns these sets of options and subOptions and import it rather than putting all the options into your template (Cleaner Code).

<script>
export default {
  data () {
    return {
      option1Selected: null,
      option2Selected: null,
      options: [
        {
          value: null,
          name: 'opt',
          text: 'Select One',
        },
        {
          value: 'option1',
          name: 'mys',
          text:'Carbohydrates',
        },
        {
          value: 'option2',
          name: 'hkong',
          text: 'Fibre',
        },
        {
          value: 'option3',
          name: 'spore',
          text: 'Fat',
        },
      ],
      subOptions: {
        option1: [
          {
            value: null,
            name: 'opt',
            text: 'Select One',
          },
          {
            value: 'option1-1',
            name: 'o1-1Name',
            text: 'Option 1-1 Text',
          },
          {
            value: 'option1-2',
            name: 'o1-2Name',
            text: 'Option 1-2 Text',
          },
          {
            value: 'option1-3',
            name: 'o1-3Name',
            text: 'Option 1-3 Text',
          },
        ],
        option2: [
          {
            value: null,
            name: 'opt',
            text: 'Select One',
          },
          {
            value: 'option2-1',
            name: 'o2-1Name',
            text: 'Option 2-1 Text',
          },
          {
            value: 'option2-2',
            name: 'o2-2Name',
            text: 'Option 2-2 Text',
          },
          {
            value: 'option2-3',
            name: 'o2-3Name',
            text: 'Option 2-3 Text',
          },
        ],
        option3: [
          {
            value: null,
            name: 'opt',
            text: 'Select One',
          },
          {
            value: 'option3-1',
            name: 'o3-1Name',
            text: 'Option 3-1 Text',
          },
          {
            value: 'option3-2',
            name: 'o3-2Name',
            text: 'Option 3-2 Text',
          },
          {
            value: 'option3-3',
            name: 'o3-3Name',
            text: 'Option 3-3 Text',
          },
        ],
      }
    }
  },
  computed: {
    option1text () {
      for (const key in this.options) {
        if (this.options[key].value === this.option1Selected) {
          return this.options[key].text;
        }
      }
    },
    option2text () {
      if (this.option1Selected != null) {
        for (const key in this.subOptions[this.option1Selected]) {
          if (this.subOptions[this.option1Selected][key].value === this.option2Selected) {
            return this.subOptions[this.option1Selected][key].text;
          }
        }
      }
    }
  },
}
</script>
<template>
  <div>
    <panel class="main-content">
      <div>
        <b-form-select v-model="option1Selected" :options="options" class="mb-3" />
        <div>Selected: <strong>{{ option1text }}</strong></div>
      </div>
      <div v-if="option1Selected != null">
        <b-form-select v-model="option2Selected" :options="subOptions[option1Selected]" class="mb-3" />
        <div>Selected: <strong>{{ option2text }}</strong></div>
      </div>
    </panel>
  </div>
</template>

Note I have updated code to properly reflect exactly what you were asking for in the question: the Text value of the option.

👤Marvin WordWeaver Parsons

Leave a comment