Question

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

2022-08-04

8053

alpine.js

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

这是我的 js 和 html

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

未捕获的 TypeError：无法读取未定义的属性（读取“名称”）在 eval（eval 在

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 分配一个空值，然后进行条件渲染。当 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>