How to only select one value in an option that contains two variables?

Question

I have a list containing a set of properties, and each of these both have a number and a name. I have made it so both are visible in my form options

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

But when the user selects an option, I only want the propertyNumber to get passed to the v-model. So if user selects the option "12345 (Property 1)", I only want the "12345" to get entered. Is this possible?

Answer 1

Yes, it's possible to achieve what you want by binding the propertyNumber to the value of the option element in the b-form-select. You can do this by setting the v-bind:value directive on each to property.propertyNumber. This way, when the user selects an option, only the propertyNumber will be passed to the v-model. Here's how you can modify your code:

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