Альтернативный способ обработки неопределенных данных ajax

Question

Что-то, чего я никогда не понимал в Vue, так это то, как следует решать проблему с неопределенными «сетевыми / асинхронными ключами».

Приведите приведенный ниже пример:

<template>
  <div>
    <h1>{{row.something_undefined_before_ajax_returns.name}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: {}
    }
  },
  created() {
    axios.get('.../row/12')
      .then(response => {
        // response = {data: {something_undefined_before_ajax_returns: {name: 'John Doe'}}}
        this.row = response.data
     })
  }
}
</script>

Это вернетв консоли предупреждение о: [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined".Тем не менее, h1 будет, наконец, отображать John Doe, как только Vue зарегистрирует асинхронные изменения.

Однако способ, которым я справился с этим до сих пор, состоит в том, чтобы просто определить ожидаемый ключ в js следующим образом:

<script>
export default {
  data() {
    return {
      row: {
        something_undefined_before_ajax_returns: {}
      }
    }
  },
  ...
}
</script>

При этом Vue не выдает предупреждениекак и ожидалось.Тем не менее, это работает в краткосрочной перспективе, но как только возвращаемые данные из HTTP-вызовов становятся немного более сложными и вложенными, возникает ощущение бессмысленности необходимости определять все возможные результаты.

Есть ли способсказать Vue, чтобы игнорировать такие предупреждения, пока вызов не будет получен?

Answer 1

Вы можете просто использовать v-if:

<h1 v-if="row">{{row.something_undefined_before_ajax_returns.name}}</h1>

И вы также можете проверить свойство строки:

<h1 v-if="row && row.something_undefined_before_ajax_returns">
 {{row.something_undefined_before_ajax_returns.name}}
</h1>

Извините, я не заметил, что строка является объектом,чтобы проверить это, вы можете использовать как:

v-if="Object.keys(row).length"

Но я не думаю, что вам нужно проверять объект, но его свойство, поэтому вы можете сделать просто:

v-if="row.something_undefined_before_ajax_returns"