如何在 Vue.js 中的按钮单击事件上启用文本字段？

我有 5 个文本字段。

1._id,
2.name,
3.display,
4.reference,
5.ref_id

我只想在单击按钮时启用第二、第三和第四个文本字段。因此，我在 Vue.js 的数据部分声明了一个变量“禁用”，并在按钮单击事件上调用函数 enableFields()。这是我的模板代码：

<template>
<div>
<!-- Dialog Modal Design -->
<v-dialog v-model="dialog" @keydown.esc="setDialog(false)" width="800px">
  <v-card>
    <v-card-title
      class="grey lighten-4 py-4 title">
    <v-icon>fa-envelope-open</v-icon>
    &nbsp; Add/Edit a Record
    </v-card-title>
    <!-- Modal pop up text fields -->
    <v-container grid-list-sm class="pa-4">
      <v-layout row wrap>
        <v-flex xs12 align-center justify-space-between>
          <v-layout align-center
            v-for="(column, i) in columns"
            :key ="i"
            v-if="column.field != ''">
            <v-text-field
              v-bind:value="getEntryFieldData(column)"
              :label="column.headerName"
              :disabled="disable">
            </v-text-field>
            <!-- ="(column.headerName == '_id')" -->
          </v-layout>
        </v-flex>
      </v-layout>
    </v-container>
    <!-- Edit/Update/Cancel Buttons -->
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="secondary" @click="onCancel">
          <v-icon>fa-ban</v-icon>
          &nbsp; Cancel
      </v-btn>
      <v-btn color="primary" @click="onCancel">
          <v-icon>fa-save</v-icon>
          &nbsp; Update
      </v-btn>
      <v-btn v-if="visible"
        color="primary" @click="enableFields">
          <v-icon>fa-pencil-alt</v-icon>
          &nbsp; Edit
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</div>
</template>

这是我的脚本：

<script>
import {mapGetters} from 'vuex';

export default {
  name: 'MasterModal',
  props: {
    input: Object,
    addBtnClick: Boolean
  },
  data () {
    return {
      isReadOnly: false,
      dialog: false,
      valid: false,
      visible: true,
      disable: true
    };
  },
  computed: {
      ...mapGetters('masterData', {
      entryState: 'entryState',
      entryData: 'entryData',
      columns: 'columns'
    })
  },
  watch: {
    addBtnClick: function (newValue, oldValue) {
    this.setDialog(!this.dialog);
  }
},
methods: {
   setDialog (bValue) {
   this.dialog = bValue;
 },
// Called when the cancel button is pressed in the form
// Clears and data currently entered in the form and closes the input modal
onCancel () {
  this.setDialog(false);
},
// Reading all column values and filling row data into the textbox in the v-for of template
getEntryFieldData (column) {
  return this.entryData[column.field];
},
enableFields () {
  this.disable = false;
}
}
};
</script>

基本上，当我使用 v-for 动态生成它们时，我对分配每个文本字段的属性感到困惑。