preface

Yesterday I encountered a problem with the elementUI Select selector component. What if the value of option needs to be an object?

I realized a method by concatenating strings and clipping myself, but after checking the official document, I can use value-key for object processing and transmission. Subsequently, I encountered a problem that value-key does not have a unique value, which is hereby recorded to prevent future pitfalls.

The first is my own implementation

. Omit other code... <el-select v-model="family"
    placeholder="Please select XXX"
    clearable
    v-blur
    >
    <el-option
      v-for="(item, index) in positionGroup"
      :key="index"
      :label="item.name"
      :value="`${item.code}/${item.sequence_code}`"
></el-option>. Omit other code...data() {
    return {
      family: "" // The value of the V-model binding
    };
  },
  watch: {
    family(val) {
      if (val.indexOf("/") != -1) {
        const arr = val.split("/");
        this.form.family_code = arr[0];
        this.form.sequence_code = arr[1];
      }else{
        this.form.code = "";
        this.form.sequence_code = ""; }}},... Omit other code...Copy the code

In fact, the specific logic is to use/as the split identifier in the way of string concatenation, judge whether there is an identifier when listening to the binding object, intercept the array by the identifier, and then perform the assignment operation.

But this operation is actually a big problem, in the assignment time if two or three is ok, if there are many, splicing after the split assignment is also more troublesome, still need some logic to process.

After reviewing the documentation, I found that there is a better way. Here is how to handle the second implementation:

Second, the official document value-key processing

. Omit other code... <el-select v-model="family"
    placeholder="Please select XXX"
    clearable
    v-blur
    value-key="code"
>
    <el-option
        v-for="(item, index) in positionGroup"
        :key="index"
        :label="item.name"
        :value="{ code: item.code, sequence_code: item.sequence_code }"
    ></el-option></el-select> ... Omit other code...data() {
    return {
      family: {} // The value of the V-model binding
    };
  },
  watch: {
    family(val) {
      const { family_code, sequence_code } = val;
      this.resignForm.family_code = family_code;
      this.resignForm.sequence_code = sequence_code; }},... Omit other code...Copy the code

Description of fields in the document:

If a value is to set an object, the value of the value must be specified by the value of the key.

Just as the code above sets the value key to code, the value below must also have that value, otherwise an error will be reported.

But there is a problem. The data format looks like this:

{
	"data": [{
		"code": "C01"."name": "Name one"."sequence_code": ""
	}, {
		"code": "C02"."name": "Name 2"."sequence_code": ""
	}, {
		"code": "C03"."name": "Name 3"."sequence_code": ""
	}, {
		"code": "C04"."name": 4 "name"."sequence_code": ""}, {"code": "C04"."name": "Name 4- Category 1"."sequence_code": "C0401"
	}, {
		"code": "C04"."name": "Name 4- Category 2"."sequence_code": "C0402"
	}, {
		"code": "C04"."name": "Name 4- Category 3"."sequence_code": "C0403"}}]Copy the code

If code is used as the unique identifier of the value key, there is a problem. Code is not unique. If this problem is solved, you can use index to handle it.

<el-select
    v-model="family"
    placeholder="Please choose your race."
    clearable
    v-blur
    value-key="index"
>
    <el-option
        v-for="(item, index) in positionGroup"
        :key="index"
        :label="item.family_name"
        :value="{ index: index, family_code: item.family_code, sequence_code: item.sequence_code }"
    ></el-option>
</el-select>
Copy the code

Value-key sets the value to index. Add an index attribute to value to ensure the uniqueness of the current selection. Other operations do not change.

If the loop is nested with multiple layers, try not to use index as the unique identifier, which will conflict with other loops. You can traverse the data when you get it, and it is also feasible to give a unique ID.

At the end

Previous vUE related articles:

Re-wrap element Tree yourself

If you find it useful to solve similar problems, your likes and comments are the biggest motivation for me to move forward.

If you have any errors or better solutions, please leave a comment