选择选项1以选择选项2并在VueJs中查看结果(文本)

时间:2018-09-27 09:15:15

标签: vue.js bootstrap-4

有人知道如何从多个相关选择字段中实际显示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中对我来说是新事物,请提供帮助。

1 个答案:

答案 0 :(得分:0)

这正在VueJS中运行(已测试)。我对b-form-select元素的工作方式略有了解,但这将为您提供所需的结果。

如果您是手动构建选项,则只需制作一个JSON文件或返回这些选项和subOptions组并将其导入的组件,而不是将所有选项都放入模板中(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>

请注意,我已更新代码以正确反映您在问题中的要求:选项的Text值。