用来自远程服务器的数据填充vue公式下拉列表

Question

我有这个配方选择组件

<FormulateInput
v-model="room_name"
name="room_name"
input-class="form-control"
:options="getRoomNames()"
type="select"
placeholder="Select an option"
label="Room Name"
/>

我正试图用数据库中的数据填充下拉列表

getRoomNames (event) {
var room_textfile = 'https://api.example.com/room_types/'+this.room_type + '.php';

axios.get(room_textfile)
.then(response => {    
console.log(response.data);
var rarr = response.data.split(/rn|r|n/);
console.log(rarr)
return "{one:'One Star',two:'Two Stars',three:'Three Stars',4:'Four Stars',5:'Five Stars'}";
})
.catch(e => {
this.errors.push(e)
});     
}

我得到的阵列是

0: "Budget Double or Twin Room"
1: "Cabin on Boat"
2: "Deluxe Double or Twin Room"
3: "Deluxe Double or Twin Room with Balcony"
4: "Deluxe Double or Twin Room with City View"
5: "Deluxe Double or Twin Room with Garden View"
6: "Deluxe Double or Twin Room with Lake View"
7: "Deluxe Double or Twin Room with Mountain View"
8: "Deluxe Double or Twin Room with Ocean View"
9: "Deluxe Double or Twin Room with Pool Access"
10: "Deluxe Double or Twin Room with Pool View"
11: "Deluxe Double or Twin Room with River View"
12: "Deluxe Double or Twin Room with Sea View"
13: "Deluxe Double or Twin Room with Spa Bath"
14: "Double or Twin Room"
15: "Double or Twin Room - Disability Access"

在转换为公式之前，我是通过这种方式获得数据的

getRoomNames (event) {
var room_textfile = 'https://api.example.com/room_types/'+this.room_types + '.php';

axios.get(room_textfile)
.then(response => {    
console.log(response.data);
this.single_rooms = response.data.split(/rn|r|n/);
})
.catch(e => {
this.errors.push(e)
});     
},

并以此方式显示

<select class="form-control" v-model="room_name">
<option v-for="room_option_name in single_rooms" :value="room_option_name.replace(/[^A-Z0-9]/ig, '_')">{{room_option_name}}</option>
</select>

如何将其迁移到vue-formula？。

Answer 1

getRoomNames()当前正在返回undefined。

就像您之前所做的那样，在成功回调中将响应数据设置为本地状态：

this.single_rooms = response.data;

现在您可以将其传递给options道具：

<FormulateInput
v-model="room_name"
name="room_name"
input-class="form-control"
:options="single_rooms" /* <--- here */
type="select"
placeholder="Select an option"
label="Room Name"
/>

双向绑定应在检索数据时填充选项