This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

Hello everybody, welcome to The blog of Big Ice cube, today we are going to talk about a very common problem, which is when selecting a select value, get the id corresponding to the selected value.

Question:

  • The option is dynamically obtained from the background, and the ID of the value selected by the user should be obtained in real time

  • For example, the select box has red, yellow, and blue values, and the ids are 1, 2, and 3 respectively

  • The user clicks red, and I want to get red with id 1

  • The user clicks yellow, and I’m going to get yellow with id 2

  • The user clicks blue, and I’m going to get the blue id 3

First, the problem steps are divided into three steps:

  1. Click the select box to send the request to the background to get the value data and dynamically render it to the page
  2. Click on the value to be selected to take the selected value and iterate over it
  3. Gets the ID of the selected value, assigned to one of the defined variables

Preparations:

Create global variable data to store data returned in the background

Create global variable ID to store the obtained ID value

Set the following properties for el-select:

@focus="function1" @change="function2(data.name)" @change="function2(data.name)" @change="function2(data.name)Copy the code

Set the following properties to el-Option:

V -for="item in data"; v-for="item in data"; To avoid traversal errors :value="item.name" // Option actual value :label="item.name" // Option display valueCopy the code

Add method:

Let res = this.axios.get("url address "); // click on the select box function1() {// send the request to get the channel value in the drop down box let res = this.axios.get(" URL address "); if (res.code === 200) { this.data = res.data; Function2 (val) {// iterate over the list of channels, Map (s, index) => {if (s.name === = val) {this.id = this.data[index].id; Console. log(this.id)}});Copy the code

This is the traversal method, so it looks a little bit cumbersome. The value of name must not be repeated. If the value is repeated, only the id that matches the first name will be selected. So the simpler one that is commonly used is:

Bind the option value to the ID and leBAL to the value, so that the user sees the leBAL bound value, and the actual selected value is the ID. Since value represents the actual value of option, label represents the displayed value of option.

Set the following properties to el-option:

v-for="item in data"
:key="item.id"
:value="item.id"
:label="item.name"
Copy the code

Value is bound to item.id, and then select is the id you want

Function2 (val) {console.log(val)}Copy the code

Afterword.

Hello wow, I am the Antarctic ice, a technology and appearance level is proportional to the front end of the engineer, advocating to nail down the front end of the problem, I hope my blog has helped you. Pay attention to me, the front road together. Hey ~ 😛