Vue.js中如何逐行读取接口返回文本并完成列表渲染

解决方法 #

核心逻辑是将接口返回的换行分隔纯文本，按行拆分后处理为数组，即可直接用于v-for循环渲染。

1. 修改请求回调逻辑

调整getRoomNames方法中then回调的处理代码，按换行拆分文本、过滤空行：

getRoomNames (event) {
  var room_textfile = 'https://api.example.com/room_types/'+this.room_types + '.php';

  axios.get(room_textfile)
    .then(response => {    
      // 按换行符拆分，同时兼容Windows(\r\n)和类Unix(\n)系统的换行格式
      let roomArr = response.data.split(/\r?\n/)
        // 去除每行首尾空白字符，过滤空行
        .map(line => line.trim())
        .filter(line => line !== '')
      this.single_rooms = roomArr;
    })
    .catch(e => {
      this.errors.push(e)
    });     
}

2. 优化渲染代码（可选）

建议给v-for添加唯一key属性，避免Vue渲染警告：

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

注意事项

确保你的PHP服务端正确解析PHP脚本，不会将<?php开头的代码段输出到响应内容中。如果确实存在PHP代码被输出的情况，可以在过滤逻辑中额外加规则，排除无效行即可。

内容的提问来源于stack exchange，提问作者Gandalf