Alpine 表达式错误：无法读取未定义的属性（读取“名称”）表达式：“user.company.name”

Question

请是 Alpine js 的新手，我不知道出了什么问题，正在向 https://jsonplaceholder.typicode.com/users/1 发出请求并将 JSON 响应存储给用户。我能够使用 x-text 访问用户，但当我尝试访问用户对象中的对象时出现错误

这是我的js和html

Alpine 表达式错误：无法读取未定义的属性（读取“名称”） 表达式：“用户.公司.名称”

未捕获类型错误：无法读取未定义的属性（读取“名称”） 评估时（评估于

  function data() {
         return {
             user: '',
             data() {
                 fetch('https://jsonplaceholder.typicode.com/users/1')
                     .then(response => response.json())
                     .then(json => this.user = json)
             },
         }
     }

<div x-data="data()" x-init="initData()">
  <span x-text="user.company.name"></span>
</div>

Answer 1

这是因为

user

在页面加载时为空。您的数据尚未得到处理。使用可选链：

user?.company?.name; // Results in 'undefined' before data is loaded
user?.company?.name || 'placeholder'; // Results in "placeholder" before data is loaded

加载数据并填充

user

后，您的

x-text

应相应显示

Answer 2

@Yinci的回答很好
这是解决这个问题的不同方法。

您可以将空值分配给

user

，然后进行条件渲染。当用户对象为真时它就会出现。这是类似内容的简短片段

<div x-data="theApp()" x-init="fetchStuff()">
  <ul>
    <template x-if="theData">
      <template x-for="stock in theData.data.stockList">
        <li><span x-text="stock.symbol"></span> ~ <span x-text="stock.currency"></span></li>
      </template>
    </template>
  </ul>
</div>

<script>
  function theApp() {
    return {
      theData: null,
      fetchStuff() {
        fetch("http://localhost:8080")
        .then(res => res.json())
        .then(data => {
          this.theData = data;
        });
      } 
    }
  }
</script>