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

我有5个文本字段

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

我只想在单击按钮时启用第二、第三和第四个文本字段。所以，我在Vue.js的数据部分声明了一个变量“disable”，并在button click事件上调用函数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动态生成它们时。

实现它的最快方法是：

<v-text-field
    v-bind:value="getEntryFieldData(column)"
    :label="column.headerName"
    :disabled="disable || i == 0 || i == 4">
</v-text-field>

所以加上

在HTML中

:disabled="setDisable(column.field)" works for me.

手稿

setDisable (colName) {
    return this.entryState === 'read' || colName.toLowerCase().indexOf('id') !== -1;
}

---

对我有用。基本上，我是在检查哪个column.field text具有id，并通过检查其索引来禁用它。

为了了解一般信息，是否可以通过脚本并在disabled上调用一个方法来执行此操作？@NikulVyas是的，您可以编写：disabled=setDisabledi，在这个方法中，您必须返回布尔值