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

时间:2018-07-13 15:37:32

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

我有5个文本字段。

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

我只想在单击按钮时启用第二,第三和第四文本字段。因此,我在Vue.js的data部分中声明了一个变量“ disable”,并在按钮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动态生成它们时。

2 个答案:

答案 0 :(得分:1)

最快的方法是:

def delete_question():

    try:
        del questions[chosen_question]
    except KeyError:
        pass
    question_number -= 1
    random_question.update()
    root_win2()



def root_win2():
    global questions, chosen_question, random_question, question_number

    question_number = 0

    questions = {
        1: "Describe what the instruction 'BRP' does.",
        2: "Describe what is meant by the term 'Open Source Software'.",
        3: "What is meant by the term 'Lossy Compression'?",
        4: "What is the number '55' as an 8-bit unsigned integer?",
        5: "What might a printer use RAM for?",
        6: "Describe the term 'firewall'.",
        7: "Describe the Rapid Application Development process."



}

    question_number = 7

    If question_number > 0:

        chosen_question = random.randint(1, question_number)



        random_question = Label(root, bg="white", text=(questions      [chosen_question]), font = ('Courier', 13))
        random_question.place(x=10, y=50)


        delete_button = Button(text="Next", command=delete_question, height=3, width=12)  
        delete_button.place(x=370, y = 420)

答案 1 :(得分:0)

添加,

在HTML

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

在脚本中

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

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