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

2020/10/05 03:21 · javascript ·  · 0评论

我有一个输入:

<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 : ''">

要删除禁用的道具,您应该将其值设置为false这需要是布尔值false,而不是字符串'false'

因此,如果for的值为validated1或0,则disabled根据该值有条件地设置prop。例如:

<input type="text" :disabled="validated == 1">

这是一个例子。

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0,
  },
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

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

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

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

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

不难,请检查此。

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

jsfiddle

您的Disabled属性需要一个布尔值:

<input :disabled="validated" />

请注意,我如何只检查validated-是否应如0 is falsey...

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

要格外小心,请尝试:
<input :disabled="!!validated" />

这种双重否定转动falseytruthy价值01falsetrue

不相信我吗?进入控制台并输入!!0!!1:-)

另外,要确保您的数字10绝对以数字而不是字符串形式出现,'1''0'在您要检查的值之前加上+例如,<input :disabled="!!+validated"/>这会将数字的字符串转换为数字,例如

+1 = 1
+'1' = 1

就像上面的David Morrow所说的那样,您可以将条件逻辑放入一种方法中-这样可以使您的
代码更具
可读性-只需从该方法中返回要检查的条件即可。

您可以: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>

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

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

尝试这个

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

Vue JS

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})

切换输入的disable属性非常复杂。对我来说,问题是双重的:

(1) 请记住:输入的“ disabled”属性不是布尔属性。

存在该属性就意味着该输入被禁用。

但是,Vue.js的创建者已经准备好了...
https://vuejs.org/v2/guide/syntax.html#Attributes

(感谢@connexo。。。如何在vuejs的输入文本中添加禁用的属性?

(2)此外,我还有一个DOM时序重新渲染问题。当我尝试回退时,DOM没有更新。

在某些情况下,“该组件将不会立即重新渲染。它将在下一个'tick'中更新。”

从Vue.js文档中:https ://vuejs.org/v2/guide/reactivity.html

解决方案是使用:

this.$nextTick(()=>{
    this.disableInputBool = true
})

更完整的示例工作流程:

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>

可以使用此添加条件。

  <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>

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

本文地址:http://javascript.askforanswer.com/ruhezaivue-jszhongyoutiaojiandijinyongshuru.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!