读取和重绘vue js中基于文本的列表

Question

我有这个php文件，它在一个普通文本文件中注入cor头。

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

我有一个基于公理的get请求，它是由复选框中的更改触发的。

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)
            });     
    }

我希望访问返回的文本文件的每一行，以某种方式对其进行处理，并使其可用，例如使用for循环来列表重命名。

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

蔡我是如何逐行读取返回的对象的？

结果

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

Answer 1

您可以使用以下.split(/\r\n|\r|\n/)将字符串转换为一个字符串数组，该数组由换行分隔：

​

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>

​

从 this answer获取的行拆分正则表达式