html-table - Vue - 如何将表列绑定(bind)到数据对象？

Question

我是 Vue 的新手，所以请放轻松!情况是这样的。一定有比我在这里做的更好的方法。

我有一个简单的 2 列 HTML 表格:

<table id="contacts">
<tbody>
    <tr>
        <th class="column-1">
            Contact Id
        </th>
        <th class="column-2">
            Applications assigned count
        </th>       
    </tr>
      <tr class="odd" id="contacts_tr_1">
	<td class="column-1">
      1
      </td>
	<td class="column-2">
      247
      </tr>
      <tr class="even last" id="contacts_tr_2">
	<td class="column-1">
      2
      </td>
	<td class="column-2">
     0
      </td>
  </tr>
      <tr class="even last" id="contacts_tr_2">
	<td class="column-1">
      3
      </td>
	<td class="column-2">
     44
      </td>
  </tr>
        <tr class="even last" id="contacts_tr_2">
	<td class="column-1">
      .........
      </td>
	<td class="column-2">
     .........
      </td>
  </tr>

      <tr class="even last" id="contacts_tr_2">
	<td class="column-1">
      10
      </td>
	<td class="column-2">
     76
      </td>
  </tr>
 </tbody>
 </table>

我想根据 AJAX 调用的结果更新“应用程序分配计数”列(但仅限于某些行)。因此假设该表有 10 行，AJAX 调用可能会说第 1、4 和 7 行的“应用程序分配计数”列的值需要更新，例如分别为 247、80 和 356。我正在考虑使用这样的 JSON 对象作为我的 Vue 数据对象，因为 AJAX 响应将如下所示。

  data: {
    num_of_applications_assigned: [
        {
            "party_id": "1",
            "num": "247"},
        {
            "party_id": "4",
            "num": "80"},
        {
            "party_id": "7",
            "num": "356"}

    ]
  },

我认为可能有一种方法可以将“应用程序分配计数”列绑定(bind)到由 AJAX 调用更新的 Vue 数据对象，但除了添加唯一的 v-给每个人发短信<TD>细胞例如

<div v-text="num_of_applications_assigned_1"></div>
<div v-text="num_of_applications_assigned_2"></div>
etc

然而，这导致我在使用 AJAX 响应的结果更新那些 v-text 时编写了一些非常复杂的代码，因为我必须动态构建引用:

 let vm = this;
    jQuery.ajax({
            url: myurl
        }).then(function(response) {                
           for (var i = 0, len = vm.num_of_applications_assigned.length; i < len; i++) {
            var party_id = vm.num_of_applications_assigned[i].party_id;
            var dref = 'vm.num_of_applications_assigned_'+party_id;
            var dnum = vm.num_of_applications_assigned[i].num;
            eval(dref + ' = ' + dnum + ';');
           }           
    });

是的，我知道eval 不好 - 这就是我在这里寻求帮助的原因!这样做的更好方法是什么，或者 Vue 不适合这种情况？

Answer 1

I can't use v-for, as the table and its rows are all generated server side

如果您不能使用 v-for，您仍然可以使用 Vue 来呈现您的数据，如果您决定在服务器端做一些额外的工作，并且您以稍微不同的方式塑造您的数据。它不如 v-for 优雅，但应该很简单。

例如，如果您想创建一个双列表格，其中 Vue 将呈现/更新第二列的单元格值，您可以在服务器端生成类似这样的内容:

<table id="app">
    <tr>
        <td>1</td> 
        <td>{{ applications.party_1.num }}</td>
    </tr>
    <tr>
        <td>2</td> 
        <td>{{ applications.party_2.num }}</td>
    </tr>
</table>

使用您最喜欢的服务器端语言动态生成值 party_1、party_2、party_3。

这意味着像这样的底层数据结构:

applications: {
  party_1: { num: 1 },
  party_2: { num: 2 }
}

在服务器端动态创建该结构应该很简单。然后，只需创建一个 Vue 实例并使用该数据结构填充其初始 data 对象:

new Vue({
  el: '#app',
  data: {
    applications: {
      party_1: { num: 1 },
      party_2: { num: 2 }
    }
  }
});

当 HTML 在浏览器中呈现时，Vue 实例会挂载，它会从其 data 对象更新绑定(bind)的单元格值。这些值是 react 性的，因此对 Vue 实例的底层数据的任何后续更改都将自动呈现。

希望这有帮助:)