Home  >  Article  >  Web Front-end  >  How to implement drop-down selector in vue to traverse different arrays

How to implement drop-down selector in vue to traverse different arrays

PHPz
PHPzOriginal
2023-03-31 14:10:581155browse

With the development of web applications, more and more people choose to use Vue.js to build their applications, and the built-in v-for directive of Vue.js makes it very easy to traverse data. In this article, we will look at how to use Vue.js’s v-for directive to iterate over different arrays to implement a drop-down selector.

First, we need to create a Vue instance and define the data. In this example, we define two arrays, one containing fruits and one containing vegetables:

var app = new Vue({
  el: '#app',
  data: {
    fruits: [
      '苹果',
      '香蕉',
      '芒果'
    ],
    vegetables: [
      '胡萝卜',
      '青菜',
      '土豆'
    ],
    selectedFruit: '',
    selectedVegetable: ''
  }
})

The selectedFruit and selectedVegetable are used to record user selections Variables of fruits and vegetables. In HTML, we can bind these variables using the v-model directive:

<div id="app">
  <select v-model="selectedFruit">
    <option disabled value="">请选择水果</option>
    <option v-for="fruit in fruits" :value="fruit">
      {{ fruit }}
    </option>
  </select>

  <select v-model="selectedVegetable">
    <option disabled value="">请选择蔬菜</option>
    <option v-for="vegetable in vegetables" :value="vegetable">
      {{ vegetable }}
    </option>
  </select>
</div>

In the above code, we use the v-for directive to iterate over the fruits and vegetables array. Note that we use the :value syntax to set the value of each option instead of using the value attribute. This is because we need to set the values ​​of the options dynamically rather than hardcoding them into the template.

Now, when the user selects a fruit or vegetable, we can update the corresponding variable in the Vue instance. For example, when selecting fruit, we can store the user-selected fruit in selectedFruit using the following code:

var app = new Vue({
  // ...
  methods: {
    selectFruit: function(event) {
      this.selectedFruit = event.target.value
    }
  }
})

Bind the selectFruit method to On the change event:

<select v-model="selectedFruit" @change="selectFruit">

Similarly, we can create a selectVegetable method to handle the user's selection of vegetables:

var app = new Vue({
  // ...
  methods: {
    selectVegetable: function(event) {
      this.selectedVegetable = event.target.value
    }
  }
})
<select v-model="selectedVegetable" @change="selectVegetable">

Now, when the user selects a fruit or Vegetables, we can print out the user's selections. For example, we can create a logSelection method in the Vue instance to log the selection:

var app = new Vue({
  // ...
  methods: {
    logSelection: function() {
      console.log("水果选择: " + this.selectedFruit)
      console.log("蔬菜选择: " + this.selectedVegetable)
    }
  }
})

We also need to bind the logSelection method to a button so that when After the user makes a selection, they can click this button to print the selection information:

<button @click="logSelection">打印选择</button>

Now, when the user selects a fruit or vegetable, we can see the printed information on the console.

Summary

The v-for directive of Vue.js can help us easily traverse the array, and the v-model directive can be used to bind the user-selected value to a variable in the Vue instance . These variables can be used at any time to implement any functionality we need. In the above example, we use two different arrays to create a drop-down selector and record the user's selection in real time.

I hope this article can help you use v-for to traverse an array and implement a drop-down selector in Vue.js.

The above is the detailed content of How to implement drop-down selector in vue to traverse different arrays. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How vue reads html filesNext article:How vue reads html files