Pre-defined items in array gets overwritten by values from database. How do I solve this?-CodePudding

I am using Vue Select to generate a list, where users can add tags, which are saved to a database, but I would like to have some pre-defined values in the list that the user can pick as tags when clicking on them. I tried adding these to the options array, but the problem is that I already populate options with the tags stored in my database, and these overwrite everything in my pre-defined list.

What can I do to solve this issue. Is it an easy fix on the frontend or do I need to add the pre-defined values in my database?

<template>
  <v-select
    :value="value"
    @input="$emit('input', $event)"
    :options="options"
    maxlength="250"
    taggable
    multiple
    select-on-blur
    v-bind="$attrs"
  />
</template>

<script>
  import {propertyService} from '@/services/property';

  export default {
    props: {
      value: Array
    },
    data() {
      return {
        options: ['Tag1', 'Tag2',], /* VALUES FROM DATABASE GO IN HERE */
      };
    },
    
    /* HERE DATA FROM MY DATABASE IS IMPORTED */
    created() {
      propertyService.getPropertyTags().then(result => this.options = result.data);
      console.log(this.options)
    }
  };
</script>

CodePudding user response：

Just use the spread operator to concatenate the predefined items with stored ones from the DB :

  created() {
      propertyService.getPropertyTags().then(result => this.options = [...this.options, ...result.data]);
      console.log(this.options)
    }

CodePudding user response：

U can combinated thase array:

computed: {
   options() {
       return ['tag1', 'tag2', ...this.dbOptions]
   }
},
data() {
     return {
       dbOptions: [], /* VALUES FROM DATABASE GO IN HERE */
     }
}
created() {
  propertyService.getPropertyTags().then(result => this.dbOptions = result.data);
  console.log(this.options)
}