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

【问题标题】：How do I enable text-fields on button click event in Vue.js?如何在 Vue.js 中的按钮单击事件上启用文本字段？
【发布时间】：2018-12-22 00:57:48
【问题描述】：

我有 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 动态生成它们。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

实现它的最快方法是：

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

【讨论】：

仅作为一般信息，是否可以通过脚本并在禁用时调用方法来做到这一点？
@NikulVyas 是的，你可以写 :disabled="setDisabled(i)" 并且在这个方法中你必须返回布尔值

【解决方案2】：

所以添加，

在 HTML 中

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

在脚本中

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

为我工作。基本上我正在检查哪个 column.field 文本具有 id 并通过检查其索引来禁用它。

【讨论】：