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

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!