VueJS2 和 Lodash4：如何在 HTML table 中将 v-for 与另一个 v-for 嵌套？

Question

我无法在 HTML table 中正确显示一些计算数据。如何用我的 filteredFieldsWithOldValues() 方法中的值替换 table 中的 x 占位符内容？

让我解释一下。

我有一些这样的数据：

Codesandbox 工作演示：https://codesandbox.io/s/country-old-and-new-forked-s4zh7?file=/src/App.vue:51-599

{
  "name": "Canada",
  "entryType": 2,
  "shortName": "CanadaEH",
  "shortName_old": "Canada",
  "fullName": "The NEW Republic of Canada",
  "fullName_old": "The Republic of Canada",
  "entryNotes": "Changed the short name and full name ",
  "entryNotes_old": "fixed typo on short name"
}

使用 lodash，我过滤掉了附加了字符串 _old 的字段，还过滤掉了一些我不想在数据中显示的额外字段。总的来说，它看起来像这样：

filteredFieldsWithNewValues() {
      const fieldsWithNoOldString = omitBy(this.country, (v, k) =>
        k.endsWith("_old")
      );
      const omittedFields = omit(fieldsWithNoOldString, [
        "updateStatus",
        "entryType",
        "name",
      ]);
      return omittedFields;
    },

这工作正常，我的数据在 HTML table:

中正确显示

但是，我需要将 table 中的 x 占位符替换为附加了 _old 的键中的值。我试着这样做：

    filteredFieldsWithOldValues() {
      const fieldsWithOld = pickBy(this.country, (v, k) => k.endsWith("_old"));
      return fieldsWithOld;
    },

然后在我的 HTML table 中，我将另一个 v-for 放在 <tr> 的元素上，如下所示：

<td v-for="(x, index) in filteredFieldsWithOldValues" :key="index">
{{ x }}
</td>

所以，更新后的 HTML 看起来像这样：

    <table class="table">
      <thead>
        <tr>
          <th scope="col">Field</th>
          <th scope="col">Old</th>
          <th scope="col">New</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(value, field, index) in filteredFieldsWithNewValues"
          :key="index"
        >
          <th scope="row">{{ field }}</th>
          <td v-for="(x, index) in filteredFieldsWithOldValues" :key="index">
            {{ x }}
          </td>
          <td>{{ value }}</td>
        </tr>
      </tbody>
    </table>

但是现在，table 没有正确显示值。

如何正确显示 _old 键的值？

Answer 1

试试这个

<table class="table">
  <thead>
  <tr>
    <th scope="col">Field</th>
    <th scope="col">Old</th>
    <th scope="col">New</th>
  </tr>
  </thead>
  <tbody>
  <tr
    v-for="(value, field, index) in filteredFieldsWithNewValues"
    :key="index"
  >
    <th scope="row">{{ field }}</th>
    <td>{{ filteredFieldsWithOldValues[field + '_old'] }}</td>
    <td>{{ value }}</td>
  </tr>
  </tbody>
</table>

VueJS2 和 Lodash4：如何在 HTML table 中将 v-for 与另一个 v-for 嵌套？

VueJS2 and Lodash4: How to nest v-for with another v-for in an HTML table?

lodash

vuejs2

试试这个