Bootstrap form-select：如何在包含两个变量的选项中仅选择一个值？

Question

我有一个包含一组属性的列表，每个属性都有一个编号和一个名称。我已经做到了，所以两者都在我的表单选项中可见

  <b-col md="3">
    <b-form-group :label="$t('departmentNumber')">
      <b-form-select vuelidate v-model="$v.consumptionConfiguration.departmentNumber">>
        <option v-for="property in consumptionConfiguration.properties">
          {{ property.propertyNumber + ' ' + '(' + property.name  + ')'}}
        </option>
      </b-form-select>
    </b-form-group>
  </b-col>

但是当用户选择一个选项时，我只希望将 propertyNumber 传递给 v-model。 因此，如果用户选择选项“12345（属性1）”，我只希望输入“12345”。 这可能吗？

Answer 1

是的，可以通过将 propertyNumber 绑定到 b-form-select 中的 option 元素的值来实现您想要的效果。您可以通过将每个属性上的 v-bind:value 指令设置为 property.propertyNumber 来完成此操作。这样，当用户选择一个选项时，只有 propertyNumber 会传递给 v-model。以下是修改代码的方法：

<b-col md="3">
  <b-form-group :label="$t('departmentNumber')">
    <b-form-select v-model="$v.consumptionConfiguration.departmentNumber">
      <option v-for="property in consumptionConfiguration.properties" v-bind:value="property.propertyNumber">
        {{ property.propertyNumber + ' (' + property.name + ')' }}
      </option>
    </b-form-select>
  </b-form-group>
</b-col>