Выберите вариант 1, чтобы выбрать вариант 2 и просмотреть результат (текст) в VueJs

Question

Кто-нибудь знает, как на самом деле отобразить значение text из нескольких зависимых полей выбора?

Мне нужен вариант 1, чтобы вывести список родительских параметров.Когда выбран вариант 1, он определяет значения, доступные в поле выбора варианта 2.

Затем я хочу, чтобы значение text, связанное с выбранным параметром, отображалось под полем выбора.

<template>
  <div>
    <panel class="main-content">
      <div>
        <b-form-select v-model="selected" :options="options" class="mb-3" />
        <div>Selected: <strong>{{ selected }}</strong></div>
      </div>
      <div>
        <b-form-select v-model="selected" :options="options" class="mb-3" />
        <div>Selected: <strong>{{ selected }}</strong></div>
      </div>
    </panel>

  </div>
</template>


<script>
export default {
  data () {
    return {
      selected: 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' }
      ]
    }
  }
}
</script>

Пожалуйста, помогите, так как для меня это что-то новое в VueJs.

Answer 1

Это работает в VueJS (проверено).Я немного не понял, как работает элемент b-form-select, но это даст вам необходимые результаты.

Если вы создаете параметры вручную, возможно, просто создайте файл JSON или компонент, которыйвозвращает эти наборы параметров и подопций и импортирует их, а не помещает все параметры в шаблон (код уборщика).

<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>

Примечание. Я обновил код, чтобы он точно отражал то, что вы спрашивали в вопросе: текстовое значение параметра.