如果在vue.js中满足条件？ 我有一个“提交”按钮，我目前设置为van-submit-bar下的禁用。一旦用户从下拉选项中选择一个表号，我就需要启用它。 默认情况下选择ta ...

Question

用户选择了一个表，用户将能够选择“提交”按钮。我粘贴了下面的选项列表的样子。

• 这是提交按钮;

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

• 这是选择表下拉选项；

   <div v-bind:style="style"></div>
    <van-dropdown-menu direction="up">
    <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>



option1: [
            { text: 'Select Table', value: 0 },
            { text: 'Table 1', value: 1 },
            { text: 'Table 2', value: 2 },
            { text: 'Table 3', value: 3 }, 

看起来像是一件容易的事，但是我遇到了一些麻烦。 thanks

您可以利用Vue的反应性轻松地做到这一点。没有看到您的代码，我所能提供的就是一种常见的方法。

在您的模板中

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

然后在您的脚本中

Answer 1

这将导致值开始空的，当选择列表更改时，

v-model

将更新并启用按钮。 您可以像这样切换元素的残疾属性：

博林 -

:disabled="true"或"disabled="false"

差异 -

:disabled="yourVariable"

函数 -

Answer 2

您的代码最终将看起来像这样：

• <van-submit-bar
        :price="toPrice(basketTotalPrice)"
        :disabled="yourVariable" // <-- You can use a variable or call a function must be a boolean value
        label="Total:"
        currency="£"
        button-text="Submit"
        :loading="isLoading"
        @submit="onSubmit"
      >

  我通过添加：
:disabled="!selectedTable"

• <van-submit-bar
    :price="toPrice(basketTotalPrice)"
    label="Total:"
    currency="£"
    button-text="Submit"
    :loading="isLoading"
    :disabled="!selectedTable"
    @submit="onSubmit"
  >

• 并在我的data（）部分中添加

  selectedTable: 0