如果 vue.js 中满足条件，如何启用禁用按钮？

Question

我有一个“提交”按钮，目前已在 van-submit-bar 下设置为禁用。当用户从下拉选项中选择桌号时，我需要启用它。

\n

\n

• 默认情况下，选择表是下拉列表中的第一个选项，因此这就是我禁用提交按钮的原因。

  \n
\n

• 一旦用户选择了表格，用户将能够选择“提交”按钮。我已经粘贴了下面的选项列表。

  \n
\n

\n

这是提交按钮；

\n

<van-submit-bar\n      :price="toPrice(basketTotalPrice)"\n      disabled\n      label="Total:"\n      currency="\xc2\xa3"\n      button-text="Submit"\n      :loading="isLoading"\n      @submit="onSubmit"\n    >\n

\n

这是选择表下拉选项；

\n

   <div v-bind:style="style"></div>\n    <van-dropdown-menu direction="up">\n    <van-dropdown-item v-model="value1" :options="option1" />\n    </van-dropdown-menu>\n\n\n\noption1: [\n            { text: 'Select Table', value: 0 },\n            { text: 'Table 1', value: 1 },\n            { text: 'Table 2', value: 2 },\n            { text: 'Table 3', value: 3 }, \n

\n

看起来这应该是一件很容易做到的事情，但我遇到了一些麻烦。

\n

谢谢

\n

Answer 1

您可以利用 Vue 的反应性轻松完成此操作。在没有看到您的代码的情况下，我所能提供的只是一种通用方法。

在你的模板中

<select v-model="selectData">...</select>
<button :disabled="!selectData">Action</button>

然后在你的脚本中

data () {
    return {
      selectData: null,
    }
  },

这将导致该值开始为空，并且当选择列表更改时，v-model将更新并启用该按钮。