Блог

У меня возникли проблемы с получением некоторых вычисленных данных для правильного отображения в моей HTML-таблице. Как я могу заменить содержимое x заполнителя в таблице значениями из моего filteredFieldsWithOldValues() метода?

Позвольте мне объяснить.

У меня есть некоторые данные, такие как:

Рабочая демонстрация 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:

Однако мне нужно заменить x заполнитель в таблице значениями из _old добавленных к ним ключей. Я пытался сделать это так:

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

А затем в моей HTML-таблице я поместил еще v-for <tr> один элемент «s», вот так:

 <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>
 

Но теперь в таблице неверно отображаются значения.

Как я могу правильно отображать значения из ключей с _old помощью правильно?

Попробуйте это

 <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>