The operation of splicing label with Select selector in Vue

I won't talk too much, let's just look at the code ~

 <el-form-item label=" Cargo channel goods " prop="productid">
          <el-select v-model="form.productid" filterable placeholder=" Please select " @change="changeselect">
            <el-option v-for="item in myproducts"
                  :key="item.Id"
                  :label="`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`"
                  :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>

Normal usage:

: label= "item. label"

Multiple field splicing:

:label="${item.Name}/${item.Brand}/${item.Type}/${item.Spec}"

Additional knowledge: element el-select dynamically creates binding properties without updating the view-serial pit filling

The project requirements are as follows:

1. In the a component, through the operation page, request to get the required data, and then store the data in vuex. The data structure is a multi-layer nested structure, which is roughly as follows

ceshi:[
  {
   values:[
    {
     value:[
      {id:1,label:' Ha ha 1'},
      {id:2,label:' Ha ha 2'},
      {id:3,label:' Ha ha 3'}
     ]
    },
    {
     value:[
      {id:4,label:' Ha ha 4'},
      {id:5,label:' Ha ha 5'},
      {id:6,label:' Ha ha 6'}
     ]
    }
   ]
  }
 ]

In the component, by obtaining the data ceshi in vuex as the data source,

computed: {
  ...mapGetters(['ceshi'])
 },

Then render the data dynamically in the b component, because I need to dynamically bind properties, so I create a dynamic variable structure in computed

// Data rendering 
  <div v-for="(x1,index1) in ceshi" :key="index1+'1'">
   <div v-for="(x2,index2) in x1.values" :key="index2+'2'">
     <el-select placeholder=" Please select " v-model="form[index1].values[index2].value"> // Dynamic binding property 
      <el-option
       v-for="item in x2.value"
       :key="item.id"
       :label="item.label"
       :value="item.id">
      </el-option>
     </el-select>
   </div>
  </div>
//  

computed: {
  ...mapGetters(['ceshi']),  
   form(){   
    return this.ceshi.map((val,index) => {
     let values = val.values.map((val,index) => {
      let json={value:""}
      return json
     })
     let ojson = {values};
     return ojson
    })
   }  
 }

It is found that the data binding is successful, and the data will change when the selection box changes, but the page does not change and the view is not updated. It is useless to add the $set method to the select code, and the view is also not updated; Looking at the document, I found that computer has no bi-directional binding by default, and the default is getter. I need to write setter function by myself. However, I found that because my dynamic data is obtained by the data in vuex, and I have not defined other data, I can't use setter, so I modified it as follows

 data() {
  return {
   form:[]
 },
created () {
   this.ceshi.forEach((val,index) => {
    let values = val.values.map((val,index) => {
     let json={value:""}
     return json
    })
    let ojson = {values};
    this.form.push(ojson)
   })  
 }

Results reported error, the analysis reason should be, I did not in the a component operation to obtain data, but this time the created function running so reported error, modify the logic through watch monitoring ceshi data changes

 ceshi: {
   handler(newValue,oldValue) {
    this.ceshi.forEach((val,index) => {
      let values = val.values.map((val,index) => {
       let json={value:""}
       return json
      })
      let ojson = {values};
      this.form.push(ojson)
     })
   },
   deep: true
  }

Look at the effect again, and find that it has been solved. The record is as follows, hoping to help you!