选择框的数据需要获取后台数据,最开始在mounted里获取数据,数据拿到了,但是视图不更新。
错误代码:
<temple>
<el-select v-model="list" placeholder="请选择">
<el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</temple>
<script>
import axios from "axios"
export default {
name: "options",
data() {
return {
operationOptions:[],
}
},
mounted(){
this.getOperationOptions(),
},
methods:{
getOperationOptions(){
let self = this
axios.get("..." ) //这里是你的地址
.then(res => {
let tempResponse = res.data.replace(/:(\d+)([,\}])/g, ':"$1"$2')
let result = JSON.parse(tempResponse)['data']
self.operationOptions = result.map(
item=> ({
"value": item.id,
"label": item.Name,
})
)
});
}
}
}
</script>
后来改成这样 , 正确代码:
<temple>
<el-select v-model="list" placeholder="请选择">
<el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</temple>
<script>
import axios from "axios"
export default {
name: "options",
data() {
return {
//这里没了
}
},
created:{
operationOptions() {
let obj = [];
axios.get("..." ) //这里是你的地址
.then(res => {
let tempResponse = res.data.replace(/:(\d+)([,\}])/g, ':"$1"$2')
let result = JSON.parse(tempResponse)['data']
result.forEach((item, index) => {
obj.push({
"value": item.id,
"label": item.albumName,
});
});
});
return obj;
}
}
}
</script>
这样就OK啦!