处理未定义的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"。但是，一旦 Vue 注册了异步更改，h1 最终将显示John Doe。

但是，到目前为止，我处理这个问题的方式是简单地在 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>

抱歉，我没有注意到 row 是一个对象，要检查它，您可以使用：

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

但我认为你不需要检查对象而是它的属性，所以你可以这样做：

v-if="row.something_undefined_before_ajax_returns"