Vue.js में इनपुट को सशर्त रूप से अक्षम कैसे करें

Question

मेरे पास एक इनपुट है:

<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, यह 0या तो हो सकता है 1, लेकिन डेटाबेस में कोई भी मूल्य संग्रहीत नहीं है, मेरा इनपुट हमेशा अक्षम है।

मुझे इनपुट को अक्षम करने की आवश्यकता है यदि 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 : ''">

Answer 1

अक्षम किए गए प्रोप को निकालने के लिए, आपको इसका मान निर्धारित करना चाहिए false। इसके लिए बूलियन मान होना चाहिए false, न कि स्ट्रिंग 'false'।

इसलिए, यदि मान validated1 या 0 है, तो सशर्त रूप disabledसे उस मान के आधार पर प्रोप सेट करें । उदाहरण के लिए:

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

Comments

मेरे db में, मेरे पास 0 और 1 है, जो आपके

— फिडेल के

क्या मुझे अपनी db संरचना को संपादित करने की आवश्यकता है, यह बिल्कुल सही और गलत है?

— ज़फ़र सैफ़ी

नहीं, बस अपने db में आइटम के मूल्य के आधार पर trueया तो मान सेट करेंfalse

— asemahle

बस करो:: अक्षम = "मान्य" जब तक मान्य है सच / गलत है या 0/1, जावास्क्रिप्ट पता चल जाएगा।

— डेस्परटैब

@ कोड जो कि jsfiddle में था अब जवाब में है

— asemahle

Answer 2

आपके पास एक गणना की गई संपत्ति हो सकती है, जो आपको आवश्यक मानदंडों पर निर्भर करते हुए बूलियन लौटाती है।

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

फिर अपने तर्क को एक संगणित संपत्ति में रखें ...

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

Comments

यह मेरे लिए काम करता है, isDisabled()HTML के भीतर कॉल करने वाले मेरे मामले में, कोई उद्धरण आवश्यक नहीं है, जिसमें परिभाषित किया गया है Data।

— सिंह

मुझे यह निश्चित रूप से बहुत पसंद है

— Shady Echo 419

कोई उद्धरण की आवश्यकता क्यों है?

— फेरक

Answer 3

मुश्किल नहीं है, यह जाँच करें।

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

jsfiddle

Comments

आपको घटक को अक्षम के साथ डेटा एटर्स की आवश्यकता है: गलत या बूलियन प्रकार।

— सेबेस्टियाओ मार्कोस

Answer 4

आपकी अक्षम विशेषता के लिए बूलियन मान आवश्यक है:

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

इस दोहरे निषेध बदल जाता है falseyया truthyका मूल्य 0या 1करने के लिए falseयाtrue

मुझे विश्वास नहीं है? अपने कंसोल में जाएं और टाइप करें !!0या !!1:-)

इसके अलावा, सुनिश्चित करें कि आपके नंबर बनाने के लिए 1या 0निश्चित रूप से एक संख्या है और नहीं के रूप में के माध्यम से आ रहे हैं स्ट्रिंग '1'या '0'पूर्व pend मूल्य आप एक साथ की जाँच कर रहे +जैसे <input :disabled="!!+validated"/>एक संख्या जैसे में एक नंबर की एक स्ट्रिंग इस बदल जाता है

+1 = 1 +'1' = 1 जैसे डेविड मॉरो ने कहा कि आप अपने सशर्त तर्क को एक विधि में डाल सकते हैं - यह आपको अधिक पठनीय कोड देता है - जिस विधि को आप जांचना चाहते हैं, बस उसी विधि से वापस लौटें।

Answer 5

आप vue.js:disabled में विशेषता में हेरफेर कर सकते हैं ।

यह एक बूलियन को स्वीकार करेगा, अगर यह सच है , तो इनपुट अक्षम हो जाता है, अन्यथा इसे सक्षम किया जाएगा ...

उदाहरण के लिए आपके मामले में नीचे की तरह संरचित कुछ:

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

इसे भी नीचे पढ़ें:

जावास्क्रिप्ट अभिव्यक्ति के माध्यम से इनपुट तत्वों को सक्रिय रूप से अक्षम करना

आप जावास्क्रिप्ट एक्सप्रेशन के साथ इनपुट इनलाइन को सशर्त रूप से अक्षम कर सकते हैं। यह कॉम्पैक्ट दृष्टिकोण सरल सशर्त तर्क को लागू करने का एक त्वरित तरीका प्रदान करता है। उदाहरण के लिए, यदि आपको केवल पासवर्ड की लंबाई की जांच करने की आवश्यकता है, तो आप ऐसा कुछ करने पर विचार कर सकते हैं।

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

Answer 6

आप एक संगणित संपत्ति बना सकते हैं और इसके मूल्य के अनुसार किसी भी प्रकार के प्रकार को सक्षम / अक्षम कर सकते हैं।

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

Comments

यह मेरी राय में, किसी के उपयोग के मामले को पढ़ने और लागू करने का सबसे आसान उत्तर है।

— जियोर्जियो टेम्पस्टा

यह केवल एक चीज थी जो मेरे लिए काम करती थी। तरीकों के बजाय गणना करने के लिए विधि को स्थानांतरित करने के लिए। धन्यवाद!

— जोक

Answer 7

इसे इस्तेमाल करे

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

वीयू जे.एस.

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

Answer 8

इनपुट की अक्षम विशेषता को चालू करने के लिए आश्चर्यजनक रूप से जटिल था। मेरे लिए मुद्दा दुगना था:

(1) याद रखें: इनपुट की "अक्षम" विशेषता एक बूलियन विशेषता नहीं है । विशेषता
की मात्र उपस्थिति का मतलब है कि इनपुट अक्षम है।

हालाँकि, Vue.js के रचनाकारों ने इसे तैयार किया है ... https://vuejs.org/v2/guide/syntax.html#Attributes

(इसके लिए @connexo को धन्यवाद ... vuejs में इनपुट टेक्स्ट में अक्षम विशेषता कैसे जोड़ें? )

(२) इसके अलावा, एक DOM टाइम री-रेंडरिंग मुद्दा था जो मैं कर रहा था। जब मैं वापस टॉगल करने की कोशिश कर रहा था तो DOM अपडेट नहीं कर रहा था।

कुछ स्थितियों में, "घटक तुरंत फिर से प्रस्तुत नहीं करेगा। यह अगले 'टिक' में अपडेट होगा।"

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>

Comments

++ (हालाँकि, Vue.js के रचनाकारों ने इसे तैयार किया है ... vuejs.org/v2/guide/syntax.html#Attributes )

— Rytis Dereskevicius

Answer 9

इस ऐड कंडीशन का उपयोग कर सकते हैं।

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

Answer 10

यह ध्यान रखें कि ES6 सेट / मैप्स प्रतिक्रियात्मक प्रतीत नहीं होते हैं जहां तक ​​मैं लिख सकता हूं, लेखन के समय।