preface

Record, is a drop – down box, inside the data to be selected by the database, and after the selection of save can also be displayed, the main record is the echo operation, and I wrote before the article is similar to minor differences.

A, vue

1.template

<a-form :form="Form" >
<a-form-item>
// Note that the following v-model is not an array directly
	<a-select v-model="Form.dataAuth" >
		<a-select-option v-for="item in list":value="item.key" :key="item.key">
			{{ item.title }}
		</a-select-option>
	</a-select>
</a-form-item>
</a-form>
Copy the code

2.data

data () {
	return {
      list: [],
      Form: {
        dataAuth: []
		}
	}
}
Copy the code

3.created

created () {
   this.show()
}
Copy the code

4. Drop-down list options

methods: {
	show(){
	// XXXXXXXXX is the interface given to you by the backend engineer. It can also be written in JS, and then imported to use
		query(xxxxxxxxx).then(res => {
        const result = res.result.data
        result.forEach((res) => {
          this.list.push({ 'key':res.key, 'title':res.title })
        })
      })
    },
}
Copy the code

5. Does the echo does

methods: {
show1() {
	query(xxxxxxxxx).then(res => {
		this. $set(this.Form, 'dataAuth', res.result.data)
        })
    }
}
Copy the code

This is what the backend engineer gives you, and he’s going to give you the data back like this

conclusion

It’s better to do.$set(), I don’t know why

this.addForm.dataAuth = ress.result.data
Copy the code

Two-tiered, like this, for dataAuth; [] The initial value is also bad, if the dataAuth; [] Just take it out and assign the initial value. I don’t know why

  Form: {
    dataAuth: []
	}
Copy the code

All right, bye, girls