在 vue js 中读取和渲染基于文本的列表答案

【问题标题】：Reading and rending a text based list in vue js在 vue js 中读取和渲染基于文本的列表
【发布时间】：2021-05-07 12:49:45
【问题描述】：

我有这个 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

我有这个基于 axios 的获取请求，它由选择框的更改触发

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

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案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

【讨论】：