如何在vue.js中有条件地禁用输入

JavaScript

蛋蛋L西里

2020-03-09

我有一个输入:

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? '' : disabled">

在我的Vue.js组件中,我有:

..
..
ready() {
        this.form.name = this.store.name;
        this.form.validated = this.store.validated;
    },
..

validated作为一个boolean,可以是01,但是无论数据库中存储了什么值,我的输入始终被禁用。

如果需要,我需要禁用输入false,否则应将其启用并进行编辑。

更新:

这样做总是启用输入(无论我在数据库中有0还是1):

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? '' : disabled">

这样做总是禁用输入(无论我的数据库中有0还是1):

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="validated ? disabled : ''">

第321篇《如何在vue.js中有条件地禁用输入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
小宇宙猴子 2020.03.09

可以使用此添加条件。

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>
村村达蒙 2020.03.09

请记住,就我所知,在撰写本文时,ES6集/地图似乎没有反应。

斯丁小胖Jim 2020.03.09

您可以具有一个计算属性,该属性根据所需的条件返回一个布尔值。

<input type="text" :disabled=isDisabled>

然后将您的逻辑放在计算属性中...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}
Near小哥神奇 2020.03.09

您可以创建一个计算属性,并根据其值启用/禁用任何表单类型。

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>
神奇Jim 2020.03.09

不难,请检查此。

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

LEYJim 2020.03.09

您可以:disabledvue.js中操纵属性

它将接受一个布尔值,如果为true,则输入被禁用,否则它将被启用...

例如,您的情况如下所示:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

另请阅读以下内容:

通过JavaScript表达式有条件地禁用输入元素

您可以有条件地禁用与JavaScript表达式内联的输入元素。这种紧凑的方法提供了一种应用简单条件逻辑的快速方法。例如,如果您仅需要检查密码的长度,则可以考虑执行以下操作。

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android