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

将常量移出数据。
在重置期间，您已将默认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;
    }
    }

Answer 2

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

在Vue中将const变量重置为其默认值

2 个答案: