Populating a vue formulate drop down with data from remote server

Question

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?.

Answer 1

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