Question

我正在将Vue.js添加到具有HTML表的现有网页中。（我无法控制HTML，但可以插入指向Vue文件的链接。）

我无法插入动态JavaScript，但是数据已经在页面上。因此，我想让Vue能够从HTML读取数据。

简化表如下：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>DOB</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>01 Jan</td>
      <td>M</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25 Dec</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

我想将其转换为：

<some-component
    v-bind:data="[
        {'Name':'John', 'DOB': '01 Jan', 'Sex' : 'M'},
        {'Name':'Jane', 'DOB': '25 Dec', 'Sex' : 'F'}
    ]">
</some-component>

我显然可以手动遍历表以手动创建JavaScript变量，但这似乎效率很低-Vue可以像这样从HTML读取数据吗？

Answer 1

Vue没有内置机制可以从任意HMTL构建对象。（虚拟DOM以相反的方式工作，即从对象构建虚拟HTML结构。）

在这种情况下，用普通的JavaScript创建对象并不困难

var tableEl = document.querySelector("table");
var keys = Array.from(tableEl.tHead.rows[0].cells).map(el => el.textContent.trim());
var array = Array.from(tableEl.tBodies[0].rows).map(row => {
  var entry = {};
  keys.forEach((key, index) => {entry[key] = row.cells[index].textContent.trim();})
  return entry;
});

Answer 2

是，您可以使用vue做到这一点：

首先，您需要使用以下模板创建组件：

         var template = "
          <table>
            <thead>
               <th>Name</th><th>DOB</th><th>Sex</th>
           </thead>
           <tbody>
              <tr v-for="obj in data" :key="obj.Name">
                  <td>{{obj["Name"]}}</td>
                  <td>{{obj["DOB"]}}</td>
                  <td>{{obj["Sex"]}}</td>
               </tr>
            </tbody>
          </table>"

然后仅将要显示在组件上的数据作为prop（绑定）传递

运行以下代码段：

// the component
Vue.component('some-component',{  
          props : ['data'],
          template : '<table><thead><th>Name</th><th>DOB</th><th>Sex</th></thead><tbody><tr v-for="obj in data" :key="obj.Name"><td>{{obj["Name"]}}</td><td>{{obj["DOB"]}}</td><td>{{obj["Sex"]}}</td></tr></tbody></table>'
})
// the instance
new Vue({
   el : '#app'
})

table,th,td {
   padding : 10px;
   border : 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <some-component  v-bind:data="[
            {'Name':'John', 'DOB': '01 Jan', 'Sex' : 'M'},
            {'Name':'Jane', 'DOB': '25 Dec', 'Sex' : 'F'},
            {'Name':'foo', 'DOB': '22 Dec', 'Sex' : 'M'},
            {'Name':'bar', 'DOB': '21 Dec', 'Sex' : 'M'}
             ]">
</some-component>
</div>

将HTML元素获取为v-bind数据

2 个答案: