Question

Abc.vue

     <v-flex xs12 sm6>
            <v-btn class="changeNumberBtn" disabled @click="changeNumber()">Change Number</v-btn>
          </v-flex>

<v-btn round block color="blue darken-3" dark large @click="generateCode">Continue</v-btn>

当前Change Number按钮已禁用。当我单击Change Number按钮时如何启用Continue按钮？

Answer 1

您可以按如下所示有条件地禁用/启用按钮。

http://www.demo.com/image.jpg

/image.jpg

Answer 2

在数据中保留一个属性，例如numberDisabled。将其初始化为true，然后单击“继续”，将其值更改为false，然后在changeNumber按钮中将禁用值设置为此变量。

<v-flex xs12 sm6>
    <v-btn class="changeNumberBtn" :disabled="numberDisabled" @click="changeNumber()">Change Number</v-btn>
</v-flex>

<v-btn round block color="blue darken-3" dark large @click="numberDisabled=false;">Continue</v-btn>

为了说明这一点，尽管您可以在@click方法中移动变量，但我正在更改generateCode上的变量。

Answer 3

什么是generateCode？如果它有逻辑，只需将一些布尔值切换为它，例如：

generateCode() {
  this.toggleButton = true
  //rest of your logic
}

<v-btn class="changeNumberBtn" :disabled="toggleButton" @click="changeNumber()">Change Number</v-btn>

如何在VueJS中单击按钮B时启用按钮A？

3 个答案: