Breaking News: Grepper is joining You.com. Read the official announcement!

how manipulate the multiple input option data in one function in vue js

Blushing Bison answered on November 27, 2020 Popularity 8/10 Helpfulness 3/10

answer how manipulate the multiple input option data in one function in vue js

how manipulate the multiple input option data in one function in vue js

Comment

<template>
  <select
    :class="$options.name"
    v-model="selected"
    @change="updateValue"
  >
    <option
      disabled
      value=""
      v-text="disabledOption"
    />
    <option
      v-for="option in options"
      :key="option"
      :value="option"
      v-text="option"
    />
  </select>
</template>

<script>
export default {
  name: 'FormSelect',
  model: {
    // By default, `v-model` reacts to the `input`
    // event for updating the value, we change this
    // to `change` for similar behavior as the
    // native `<select>` element.
    event: 'change',
  },
  props: {
    // The disabled option is necessary because
    // otherwise it isn't possible to select the
    // first item on iOS devices. This prop can
    // be used to configure the text for the
    // disabled option.
    disabledOption: {
      type: String,
      default: 'Select something',
    },
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      selected: this.value,
    };
  },
  methods: {
    updateValue() {
      // Emitting a `change` event with the new
      // value of the `<select>` field, updates
      // all values bound with `v-model`.
      this.$emit('change', this.selected);
    },
  },
};
</script>

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: markus.oberlehner.net

Tags: function javascript manipulate multiple-input

Link to this answer
Share Copy Link

Contributed on Nov 27 2020

Blushing Bison

0 Answers Avg Quality 2/10

how manipulate the multiple input option data in one function in vue js

Contents

More Related Answers

how manipulate the multiple input option data in one function in vue js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.