Vue2 with vSelect, hide the input value when options is not present

38 views Asked by At

I use vSelect from https://www.npmjs.com/package/vue-select; With the reduce option ":reduce="(x) => x.id" to get the Id as value from arrays of my dataOptions object and the show label is "name";

So in action,, users will see the "name", not the Id;

  <v-select 
    :label="configLabel"
    :options="dataOptions"
    :reduce="(x) => x.id" 
  >

When i trigger the "update/edit" form, the component will set the Id as initial value, so the detailed like "name" of that Id is still come from backend like the "name" etc;

My question is, how can i hide the initial value first before the "name" come from the server for that Id.

I try to set condition to check if the id is exist or not in dataOptions array, so when id is exist the label will be "name", and if not the label is empty string ""; But the result is still the same. The Id still showing.

0

There are 0 answers