Reading and rending a text based list in vue js

Question

I have this php file which injects cor headers in an otherwise ordinary text file.

<?php
header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST');

header("Access-Control-Allow-Headers: X-Requested-With");

?>

Double Room with Park View
Eight-Bedroom House
Five-Bedroom House
Four-Bedroom House
Holiday Home
One-Bedroom House
Seven-Bedroom House
Six-Bedroom House
Three-Bedroom House
Three-Bedroom Townhouse
Two-Bedroom House
Two-Bedroom Townhouse

I have this axios based get request which is triggred by a change in select box

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;
            })
            .catch(e => {
                this.errors.push(e)
            });     
    }

I want to access each line of the text file returned,process it in some way and make it available to list rending with a for loop for instance

<div v-for="sr in single_rooms">
        {{sr}}
    </div>

How cai i read the returned object line by line?.

Results

Deluxe Family Room
Deluxe Family Suite
Family Bungalow
Family Cabin on Boat
Family Double Room
Family Junior Suite
Family Room
Family Room - Disability Access
Family Room with Balcony
Family Room with Bath
Family Room with Bathroom
Family Room with Garden View
Family Room with Lake View
Family Room with Mountain View
Family Room with Private Bathroom
Family Room with Sauna
Family Room with Sea View
Family Room with Shared Bathroom
Family Room with Shower
Family Room with Side Sea View
Family Room with Terrace
Family Studio
Family Suite
Family Suite with Balcony
Japanese-Style Room
Standard Family Room
Superior Family Room

score 1 · Accepted Answer · answered May 07 '21 at 13:27

You can covert the string into an array of string separated by line breaks using .split(/\r\n|\r|\n/) like this:

const data = `Deluxe Family Room
Deluxe Family Suite
Family Bungalow
Family Cabin on Boat
Family Double Room
Family Junior Suite
`
var app = new Vue({
  el: '#vue',
  template: '<div> <p v-for="line in lines">{{line}}</p></div>',
  data() {
    return {
      lines: data.split(/\r\n|\r|\n/)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue"></div>

Line split regex taken from this answer

Reading and rending a text based list in vue js

1 Answers1