I have this formulate select component
<FormulateInput
v-model="room_name"
name="room_name"
input-class="form-control"
:options="getRoomNames()"
type="select"
placeholder="Select an option"
label="Room Name"
/>
I am trying to get the populate the drop down with data from the database
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(/\r\n|\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)
});
}
The array i am getting is
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"
Before switching to formulate i was getting the data this way
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(/\r\n|\r|\n/);
})
.catch(e => {
this.errors.push(e)
});
},
and showing it this way
<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>
How can i migrate this to vue formulate?.
getRoomNames()
is currently returning undefined
.
Just like you were doing earlier, set the response data to local state inside the success callback:
this.single_rooms = response.data;
Now you can pass this to the options
prop:
<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"
/>
The two way binding should populate the options when the data is retrieved