entityMap|blocks|key|5k289|text|您可以有一个计算属性，它根据您需要的任何条件返回一个布尔值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4jp1v|然后把你的逻辑放在一个计算属性中...|2q3hc|computed:+{
++isDisabled()+{
++++//+evaluate+whatever+you+need+to+determine+disabled+here...
++++return+this.form.validated;
++}
}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

you could have a computed property that returns a boolean dependent on whatever criteria you need.

<pre><code>&lt;input type="text" :disabled=isDisabled&gt;
</code></pre>

then put your logic in a computed property...

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

entityMap|blocks|key|4d95t|text|不难，看看这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ciqem|Toggle+Enable|code-block|syntax|javascript|2aldi|jsfiddle^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

Not difficult, check this.

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

<a href="https://jsfiddle.net/eo8kd2wd/13/" rel="noreferrer">jsfiddle</a>

entityMap|blocks|key|fgtah|text|disabled属性需要一个布尔值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151op|​|2sgnv|请注意，我只检查了|85t00|-这应该是这样工作的|1ge22|...e.g|d27ed|要格外小心，请尝试：|6smjn|这种双重否定会将|6r9bm|或者|4nrb9|的价值|9o9jt|ev2or|至|aei1s|8oqb8|不相信我？进入您的控制台并输入|47mk|4ghm2|:-)|d66h0|另外，为了确保你的号码|bgco6|oisr|绝对是一个数字，而不是字符串|a8mnp|3s27m|将您要检查的值前缀为|fmp40|例如，这会将一个数字字符串转换为一个数字。|f9i2p|就像David+Morrow上面说的，你可以把你的条件逻辑放到一个方法中--这给了你更多|dsek6|可读性|ctm3k|代码--只要从方法中返回你想要检查的条件即可。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1H|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1I|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1J|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1K|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1L|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1M|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1N|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1O|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1P|9|@]|A|@]|B|$]]|$2|S|4|P|6|7|8|1Q|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1R|9|@]|A|@]|B|$]]|$2|V|4|P|6|7|8|1S|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1T|9|@]|A|@]|B|$]]|$2|Y|4|P|6|7|8|1U|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1V|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|1W|9|@]|A|@]|B|$]]|$2|13|4|P|6|7|8|1X|9|@]|A|@]|B|$]]|$2|14|4|15|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|16|4|P|6|7|8|1Z|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|20|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|21|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|7|8|22|9|@]|A|@]|B|$]]|$2|1D|4|1E|6|7|8|23|9|@]|A|@]|B|$]]|$2|1F|4|1G|6|7|8|24|9|@]|A|@]|B|$]]]]

Your disabled attribute requires a boolean value:

<code>&lt;input :disabled="validated" /&gt;</code>

Notice how i've only checked if <code>validated</code> - This should work as <code>0 is falsey</code> ...e.g

<code>0 is considered to be false in JS (like undefined or null)</code>

<code>1 is in fact considered to be true</code>

To be extra careful try:
<code>&lt;input :disabled="!!validated" /&gt;</code>

This double negation turns the <code>falsey</code> or <code>truthy</code> value of <code>0</code> or <code>1</code> to <code>false</code> or <code>true</code>

don't believe me? go into your console and type <code>!!0</code> or <code>!!1</code> :-)

Also, to make sure your number <code>1</code> or <code>0</code> are definitely coming through as a Number and not the String <code>'1'</code> or <code>'0'</code> pre-pend the value you are checking with a <code>+</code> e.g <code>&lt;input :disabled="!!+validated"/&gt;</code> this turns a string of a number into a Number e.g

<code>+1 = 1
+'1' = 1
</code>
Like David Morrow said above you could put your conditional logic into a method - this gives you more readable code - just return out of the method the condition you wish to check.

entityMap|blocks|key|bhgfp|text|你可以操纵|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438ag|中的属性|8tpn3|vue.js|aonqr|..。|89eq8|它将接受一个布尔值，如果它是|lea7|正确|83a71|，则输入将被禁用，否则将被启用...|5rs8i|例如，在您的示例中，类似于下面这样的结构：|9m6gb|另请阅读下面的内容：|92g7b|c4imo|通过JavaScript表达式有条件地禁用输入元素|8bbs0|您可以有条件地禁用使用JavaScript表达式内联的输入元素。这种紧凑的方法提供了一种快速应用简单条件逻辑的方法。例如，如果您只需要检查密码的长度，则可以考虑这样做。|f5vnf|Change+Your+Password

++Please+choose+a+new+password
++



++Please+confirm+your+new+password|code-block|syntax|javascript^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|12|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|13|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|14|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|15|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|16|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|17|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|18|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|19|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1A|9|@]|A|@]|B|$]]|$2|S|4|-4|6|7|8|1B|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1C|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1D|9|@]|A|@]|B|$]]|$2|X|4|Y|6|Z|8|1E|9|@]|A|@]|B|$10|11]]]]

You can manipulate <code>:disabled</code> attribute in vue.js.

It will accept a boolean, if it's true, then the input gets disabled, otherwise it will be enabled...

Something like structured like below in your case for example:

<pre><code>&lt;input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true"&gt;
</code></pre>

Also read this below:

<blockquote>
 <h3>Conditionally Disabling Input Elements via JavaScript
 Expression</h3> You can conditionally disable input elements inline
 with a JavaScript expression. This compact approach provides a quick
 way to apply simple conditional logic. For example, if you only needed
 to check the length of the password, you may consider doing something
 like this.
</blockquote>

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

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

entityMap|blocks|key|54b6l|text|您可以创建计算属性，并根据其值启用/禁用任何表单类型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8k0np|export+default{
++++++++++computed:+{
++++++++++++++clickable()+{
++++++++++++++++++//+if+something
++++++++++++++++++return+true;
++++++++++++++}
++++++++++}
+++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You may make a computed property and enable/disable any form type according to its value.

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

entityMap|blocks|key|jrqp|text|试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|b1ikv|Click+me+to+enable|code-block|syntax|javascript|5cffv|vue+js|2neqk|new+Vue({
++el:+'#app',
++data:+{
++++terms:+false
++},
++computed:+{
++++isDisabled:+function(){
++++++++return+!this.terms;
++++}
++}
})^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

Try this

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

vue js

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

entityMap|blocks|key|euqm|text|切换输入的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7gran|已禁用|1vevs|属性非常复杂。对我来说，这个问题有两个方面：|kpl6|(1)|2jder|记住:输入的"disabled“属性是|ceol1|不是布尔值|cap6h|属性。|32kc0|这仅仅是|7hmdn|存在|ac4gh|属性的值意味着|h8nd|输入被禁用。|cchvn|然而，Vue.js的创建者已经准备好了这个...|c6l51|https://vuejs.org/v2/guide/syntax.html#Attributes|dvaeg|8p5ul|(感谢@connexo为此...|4ir8b|如何在vuejs的输入文本中添加禁用属性？|bta3q|)|2q635|(2)|17a15|此外，我还遇到了DOM计时重新渲染的问题。当我试图切换回来时，DOM没有更新。|4obfo|在某些情况下，“组件不会立即重新呈现。它将在下一个‘滴答’中更新。”|2jv12|来自Vue.js文档：|vi9m|https://vuejs.org/v2/guide/reactivity.html|9j5d9|解决方案是使用：|c69pj|this.$nextTick(()=>{
++++this.disableInputBool+=+true
})|code-block|syntax|javascript|73ium|Fuller示例工作流：|fe0kb|press+me+(do+stuff+in+method,+then+disable+input+bool+again)




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

}^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1S|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1T|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1U|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1V|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1W|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1X|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1Z|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|20|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|21|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|22|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|23|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|24|9|@]|A|@]|B|$]]|$2|10|4|-4|6|7|8|25|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|26|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|27|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|28|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|29|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|2A|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|7|8|2B|9|@]|A|@]|B|$]]|$2|1D|4|1E|6|7|8|2C|9|@]|A|@]|B|$]]|$2|1F|4|1G|6|7|8|2D|9|@]|A|@]|B|$]]|$2|1H|4|1I|6|7|8|2E|9|@]|A|@]|B|$]]|$2|1J|4|1K|6|1L|8|2F|9|@]|A|@]|B|$1M|1N]]|$2|1O|4|1P|6|7|8|2G|9|@]|A|@]|B|$]]|$2|1Q|4|1R|6|1L|8|2H|9|@]|A|@]|B|$1M|1N]]]]

To toggle the input's disabled attribute was surprisingly complex. The issue for me was twofold:

(1) Remember: the input's "disabled" attribute is NOT a Boolean attribute. 
The mere presence of the attribute means that the input is disabled.

However, the Vue.js creators have prepared this...
<a href="https://vuejs.org/v2/guide/syntax.html#Attributes" rel="noreferrer">https://vuejs.org/v2/guide/syntax.html#Attributes</a> 

(Thanks to @connexo for this... <a href="https://stackoverflow.com/questions/49194163/how-to-add-disabled-attribute-in-input-text-in-vuejs/49194596#49194596">How to add disabled attribute in input text in vuejs?</a>)

(2) In addition, there was a DOM timing re-rendering issue that I was having. The DOM was not updating when I tried to toggle back.

Upon certain situations, "the component will not re-render immediately. It will update in the next 'tick.'"

From Vue.js docs: <a href="https://vuejs.org/v2/guide/reactivity.html" rel="noreferrer">https://vuejs.org/v2/guide/reactivity.html</a>

The solution was to use:

<pre><code>this.$nextTick(()=&gt;{
 this.disableInputBool = true
})
</code></pre>

Fuller example workflow:

<pre><code>&lt;div @click="allowInputOverwrite"&gt;
 &lt;input
 type="text"
 :disabled="disableInputBool"&gt;
&lt;/div&gt;

&lt;button @click="disallowInputOverwrite"&gt;
 press me (do stuff in method, then disable input bool again)
&lt;/button&gt;

&lt;script&gt;

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

}
&lt;/script&gt;
</code></pre>

entityMap|blocks|key|7vio6|text|可以使用此添加条件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

Can use this add condition.

<pre><code> &lt;el-form-item :label="Amount ($)" style="width:100%" &gt;
 &lt;template slot-scope="scoped"&gt;
 &lt;el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" &gt;&lt;/el-input-number&gt;
 &lt;/template&gt;
 &lt;/el-form-item&gt;
</code></pre>

entityMap|blocks|key|29tkb|text|这也是可行的|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

This will also work
<pre><code>&lt;input type=&quot;text&quot; id=&quot;name&quot; class=&quot;form-control&quot; name=&quot;name&quot; v-model=&quot;form.name&quot; :disabled=&quot;!validated&quot;&gt;
</code></pre>

entityMap|blocks|key|20gtb|text|请记住，就我所知，在撰写本文时，ES6集/映射似乎不是反应性的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

Bear in mind that ES6 Sets/Maps don't appear to be reactive as far as i can tell, at time of writing.

I have an input:
<pre class="lang-html prettyprint-override"><code>&lt;input 
 type=&quot;text&quot; 
 id=&quot;name&quot; 
 class=&quot;form-control&quot; 
 name=&quot;name&quot; 
 v-model=&quot;form.name&quot; 
 :disabled=&quot;validated ? '' : disabled&quot;
/&gt;
</code></pre>
and in my Vue.js component, I have:
<pre class="lang-js prettyprint-override"><code>..
..
ready() {
 this.form.name = this.store.name;
 this.form.validated = this.store.validated;
},
..
</code></pre>
<code>validated</code> being a <code>boolean</code>, it can be either <code>0</code> or <code>1</code>, but no matter what value is stored in the database, my input is always disabled.
I need the input to be disabled if <code>false</code>, otherwise it should be enabled and editable.
Update:
Doing this always enables the input (no matter I have 0 or 1 in the database):
<pre class="lang-js prettyprint-override"><code>&lt;input 
 type=&quot;text&quot; 
 id=&quot;name&quot; 
 class=&quot;form-control&quot; 
 name=&quot;name&quot; 
 v-model=&quot;form.name&quot; 
 :disabled=&quot;validated ? '' : disabled&quot;
/&gt;
</code></pre>
Doing this always disabled the input (no matter I have 0 or 1 in the database):
<pre class="lang-js prettyprint-override"><code>&lt;input 
 type=&quot;text&quot; 
 id=&quot;name&quot; 
 class=&quot;form-control&quot; 
 name=&quot;name&quot; 
 v-model=&quot;form.name&quot; 
 :disabled=&quot;validated ? disabled : ''&quot;
/&gt;
</code></pre>

Disable input conditionally (Vue.js)

 我有一个输入： 在我的Vue.js组件中，我有： ....ready() {        this.form.name = this.store.name;        this.form.validated = this.store.validated;    },.. 成为一个 ，它可以是 或者 ，但无论数据库中存储了什么值，我的输入始终是禁用的。 如果出现以下情况，我需要禁用输入 ，否

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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