-2

I'm creating this post because I'm trying to add and remove option in an HTML select from a function.

I've searched everywhere but unfortunately I didn't find anything.

thank you in advance for your help!

methods: {
  addElement() {
    // function add option in actions select
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template>
  <div class="col-md-10 col-md-offset-1">
          <select name="actions" v-model="model.actions" class="form-control">
          </select>
  </div>
</template>

9
  • 1
    please provide what you have tried so far Jan 28, 2020 at 9:06
  • show your options and functions that you're saying
    – Qonvex620
    Jan 28, 2020 at 9:09
  • Right now I've got nothing, I don't even know where to start.
    – Testostas
    Jan 28, 2020 at 9:10
  • 1
    options.splice(0,1)? when using vue data driven
    – Estradiaz
    Jan 28, 2020 at 9:15
  • 1
    For add one option to options you shoud do like this: options.push({ /* your option */});
    – Sherzod
    Jan 28, 2020 at 9:27

1 Answer 1

1

Example from the vue docs https://v2.vuejs.org/v2/guide/forms.html#Select (find using v-for with select at that page):

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>


new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

If you want to add option to select just create some method addOption(option):

methods:{
    addOption(option){
        this.options.push(option);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.