Vue 元素表：未定义的嵌套值使 Chrome 崩溃答案

【问题标题】：Vue Element Table: undefined nested value crashes ChromeVue 元素表：未定义的嵌套值使 Chrome 崩溃
【发布时间】：2019-08-23 13:25:32
【问题描述】：

我正在使用一个 Vue Element 表来显示一个对象列表，其中嵌套了一个对象。

"main_list":{
  "id": "1",
  "user": {
    "username": "Bob"
  }
}

我可以使用以下方式显示用户名：

<el-table-column prop="user.username" label="User" sortable />

这个页面时不时会抛出一个错误，指出它无法读取未定义的值用户名。这将使 Google Chrome 崩溃，以至于您必须在任务管理器中终止所有 Chrome 进程。 Firefox 不会崩溃这么糟糕。我认为它进入了一个无限循环

我通过 API 获取数据，所以可能是某些用户对象没有任何用户名。

到目前为止，我找到的唯一解决方案（我不确定它是否是解决方案）是：

<el-table-column prop="username" label="User">
  <template
    v-if="typeof scope.row.assigned_to !== 'undefined'"
    slot-scope="scope"
  >{{ scope.row.assigned_to.username }}</template>
</el-table-column>

您知道为什么会发生这种崩溃吗？有比我更好的解决方案吗？

【问题讨论】：

我认为你应该这样做prop="main_list.user.username"

标签： vue.js vue-component

【解决方案1】：

获取项目列表后，您应该更新每个项目，以便每个用户都有一个定义的用户名 - 即使它是一个空字符串。像

axios.get(url).then(result => 
  this.items = result.data.map(item => 
  {
    if(!item.user) item.user = {};
    if(!item.user.username) item.user.username = '';
    return item;
  });

你也可以试试别的：

    <el-table-column label="User" sortable :sort-method="sortUsers">
      <template slot-scope="tbl">
        {{ (tbl.row.user || {}).username || 'UNKNOWN' }}
      </template>
    </el-table-column> 

    methods:
    {
      sortUsers(a, b)
      {
        const left = (a.user || {}).username || 'UNKNOWN';
        const right = (b.user || {}).username || 'UNKNOWN';
        if (left < right) return -1;
        if (left > right) return 1;
        return 0;
      }
    }

【讨论】：