在 Vuejs 中读取 HTML 响应以将其显示在对话框中答案

【问题标题】：Reading HTML response in Vuejs to display it in a Dialog box在 Vuejs 中读取 HTML 响应以将其显示在对话框中
【发布时间】：2018-02-21 13:11:12
【问题描述】：

我收到来自服务器的响应，其中包含 HTML 格式的 REST 请求。我已将其存储在 data:[] 中，当我在控制台上打印它时，它看起来像这样，即 HTML。这个回复是一个字符串，现在我的问题是在 JavaScript 中过滤它以使其成为一个对象数组

 <table border='1' frame = 'void'>
    <tr>
    <th>name</th>
    <th>age</th>
    <th>date of birth</th>
    </tr>
    <tr>
     <td>John</td>
     <td>30</td>
     <td>10.09.1987</td>
    </tr>
    </table>

我的问题是如何使用 vuejs 在对话框中显示这些 HTML 数据。我希望这些值作为这样的对象数组

   [
     name,
     age,
     data of birth,
    john,
    30,
    10.09.1987
   ]

【问题讨论】：

也许这有帮助？ vuejs.org/v2/guide/syntax.html#Raw-HTML
@Jeffrey 不，它不会存储在数组中，当我编写 console.log(this.data) 时，它会像这样打印<table border='1' frame = 'void'> <tr> <th>name</th> <th>age</th> <th>date of birth</th> </tr> <tr> <td>John</td> <td>30</td> <td>10.09.1987</td> </tr> </table>。当我打印 console.log(this.data[0]) 它给我<

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

这不是 Vue.js 的问题，而是 HTML/JavaScript 的问题。您可以迭代单元格文本内容并转换为如下所示的数组。

var stringFromREST = "<table border='1' frame='void'><tr><th>name</th><th>age</th><th>date of birth</th></tr><tr><td>John</td><td>30</td><td>10.09.1987</td></tr></table>";

var tempDiv = document.createElement('div');
tempDiv.innerHTML = stringFromREST;

var cells = tempDiv.querySelectorAll('th,td');

var contentArray = [];
for (var i = 0; i < cells.length; i++) {
  contentArray.push(cells[i].innerText);
}

console.log(contentArray);

【讨论】：