[Vuejs]-Vue Element Table: undefined nested value crashes Chrome

by

0👍

✅

Once you fetch the list of items, you should update each one of them so that every user has a defined username – even if it is an empty string. Something like 

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;
  });

You can also try something else:

    <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;
      }
    }

Leave a comment