How to make the data that is present in localStorage change?

Question

Vue.js

How can I make sure that the data that is in localStorage is initially substituted, because the data is filled in, which came from axios, I see in the updated life cycle. Accordingly, I cannot initially replace these values ​​​​and fit the column width there.
My implementation https://codesandbox.io/s/pyvjxxnnvj
The file is /src/views/WidthTable.vue
I was thinking of doing something like this

<td
            v-for="(column, ind) in columns"
            :style="{
              position: 'relative',
              width: startWidth[column.name]
                ? startWidth[column.name] + 'px'
                : column.width + 'px'
            }"
          >

In template
Then in data I create an empty object

created: function() {
    let arr = [
      axios.get("./data/columns.json"),
      axios.get("./data/employee.json")
    ];
    Promise.all(arr).then(res => {
      this.columns = res[0].data;
      this.rows = res[1].data;
      for (let i = 0; i < this.columns.length; i++) {
        let storage = localStorage.getItem(`col-${this.columns[i].name}`);
        if (storage) {
          this.startWidth[this.columns[i].name] = storage;
        }
      }
    });
  }

And in created, I just place the data from localStorage there. But such an approach, as I understand it, that the data that is not there, they change the width until the data appears in localStorage. But how to do it right?

Answer 1

I misunderstood what you need, but probably this:
methods: {
getColWidth (name, defaultValue) {
return localStorage.getItem(`col-${name}`) || defaultValue
}
}
:style="{
position: 'relative',
width: startWidth[column.name]
? startWidth[column.name] + 'px'
: getColWidth(name, column.width) + 'px'
}"