how to add a div at the end of a select options list?

thiebo 0
Viewed 26

I have a select options that is dynamically populated (vuejs):

<select v-model="form.categorie">
    <option
     v-for="cat in userStore.categories"
     :value="cat.id"
     :key="cat.id"
    >
        {{ cat.intitule }}
    </option>
</select>

and then I have a link :

<router-link :to="{ name: 'profil', params: { id: userStore.user } }">
    <FontAwesome icon="circle-info" /> 
        manage categories
</router-link>

How do I add that link to the end of the list of the select options (despite this not being an option to select)?

The goal is that the "manage categories" button displays in the select list of categories, not underneath since you don't need to the link "manage options" if you don't select options.

javascript
1 Answers

A couple of ways,

Simply add it to the bottom.

<select v-model="form.categorie">
    <option
     v-for="cat in userStore.categories"
     :value="cat.id"
     :key="cat.id"
    >
        {{ cat.intitule }}
    </option>

    <option
     @click="$router.push({ name: 'profil', params: { id: userStore.user } })"
     value=""
    >
        <FontAwesome icon="circle-info" /> manage categories
    </option>
</select>

Or somewhere push the link to the items:

userStore.categories.push({
   id: 'manage-categories', 
   intitule: 'manage categories', 
   icon: 'circle-info'
})

Then change to

<option
  v-for="cat in userStore.categories"
  :value="cat.id"
   :key="cat.id"
>
   <FontAwesome v-if="cat.icon" :icon="cat.icon" fixed-width/>{{ cat.intitule }}
</option>

Then add a watcher for form.categorie, if its value is manage-categories then do a router push:

watch: {
  'form.categorie'(v){
    if(v && v === 'manage-categories') 
      this.$router.push({ name: 'profil', params: { id: userStore.user } })
  }
}
Lawrence Cherone0
Related