Сбросить переменную const в значение по умолчанию в vue

Question

Как я могу сбросить значение моей постоянной переменной в vue? Вот что я имел в виду:

data(){
    const _hdrList = [
        {
           label: 'start_time',
           value: 'start_time'
        },            
        {
           label: 'name',
           value: 'name'
        },
        {
           label: 'another',
           value: 'another'
        },
    ];
    const _cboList = [
        {start_time:''},
        {name:''},
        {another:''},
    ];
    return{
        hdrList:_hdrList,
        headercbo:_cboList,
        columns:[],
    }
}

После этого я получаю к нему доступ, используя следующее:

<tr>
   <th v-for="(col, index) in columns" :key="index.id">   
       <ui-select
           :options="hdrList"
           v-model="headercbo[index][hdrList[index]['label']]"
       ></ui-select>
    </th>
</tr>

Вывод этого выглядит так:

И когда я нажимаю кнопку очистки, эти комбинированные списки не возвращаются к значениям по умолчанию, в которых отображается пустое или не выбранное значение. Вот как я это делаю.

clearFields(){
    this.columns = [];
    this.headercbo = [];
}

Но этот не очищает поля, они все еще имеют предыдущее выбранное значение с ними. Как я могу полностью очистить их и установить обратно по умолчанию.

Answer 1

Поместите то, что у вас есть в вашей функции data, в метод с именем initialData, затем используйте эту функцию в вашей функции data и в вашем методе clearFields.

  data() {
    return this.initialData();
  },
  methods: {
    initialData() {
      const _hdrList = [{
          label: 'start_time',
          value: 'start_time'
        },
        {
          label: 'name',
          value: 'name'
        },
        {
          label: 'another',
          value: 'another'
        },
      ];
      const _cboList = [{
          start_time: ''
        },
        {
          name: ''
        },
        {
          another: ''
        },
      ];
      return {
        hdrList: _hdrList,
        headercbo: _cboList,
        columns: [1,2],
      }
    },
    clearFields() {
      this.columns = [];
      this.headercbo = this.initialData().headercbo;
    }
  }

Answer 2

1. Переместить константу из данных.
2. Во время сброса вы переназначаете значение headercbo по умолчанию постоянным значением.

const _hdrList = [
            {
               label: 'start_time',
               value: 'start_time'
            },            
            {
               label: 'name',
               value: 'name'
            },
            {
               label: 'another',
               value: 'another'
            },
        ];
        const _cboList = [
            {start_time:''},
            {name:''},
            {another:''},
        ];
    
    export default {
    data(){
        return{
            hdrList:_hdrList,
            headercbo:_cboList,
            columns:[],
        }
    },
    clearFields() {
      this.columns = [];
      this.headercbo = _cboList;
    }
    }