How to get the value of the drop-down box in vue

In Vue, there are two ways to obtain the value of the drop-down box: 1. Use the v-model directive for two-way binding; 2. Locally listen to the change event of the drop-down box and obtain the value.

How to get the value of the drop-down box in Vue

In Vue, there are two ways to get the drop-down box Value:

1. v-model

v-model directive can bidirectionally bind the value of the drop-down box and Vue data, in the component Use it in the template:

<code class="html"><select v-model="selectedValue">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
</select></code>

Then access the selectedValue data in JavaScript:

<code class="javascript">const selectedValue = this.selectedValue;</code>

2. Local event listening

You can listen to the change event on the drop-down box and get the value in the event handler:

<code class="html"><select @change="handleChange">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
</select></code>

<code class="javascript">methods: {
  handleChange(event) {
    const selectedValue = event.target.value;
  }
}</code>

No matter which method is used, you can easily get the value of the drop-down box in Vue.

The above is the detailed content of How to get the value of the drop-down box in vue. For more information, please follow other related articles on the PHP Chinese website!