VueJS सशर्त रूप से एक तत्व के लिए एक विशेषता जोड़ते हैं

Question

VueJS में हम v-if का उपयोग करके DOM तत्व जोड़ या हटा सकते हैं:

<button v-if="isRequired">Important Button</button>

लेकिन एक डोम तत्व की विशेषताओं को जोड़ने / हटाने का एक तरीका है उदाहरण के लिए निम्नलिखित सशर्त रूप से आवश्यक विशेषता सेट करें:

Username: <input type="text" name="username" required>

कुछ इसी तरह से:

Username: <input type="text" name="username" v-if="name.required" required>

कोई विचार?

Comments

हालांकि इतना स्पष्ट नहीं होने के कारण (इसलिए भ्रम) प्रलेखन वास्तव में कहता है कि यदि विशेषता मान गलत का मूल्यांकन करता है तो विशेषता छोड़ी जा रही है ( vuejs.org/v2/guide/syntax.html#Attributes )

— अलेक्जेंडर

वास्तव में, प्रलेखन कहते विशेषता नहीं जोड़ा जाएगा यदि "... का मूल्य है null, undefinedया false" जो गलत पर आकलन करने से जे एस स्क्रिप्ट से अलग है। इसका मतलब है कि एक रिक्त स्ट्रिंग जावास्क्रिप्ट में झूठी है, लेकिन फिर भी DOM में विशेषता जोड़ देगा। इससे बचने के लिए कि आप कोशिश कर सकते हैंv-bind:name="name || false"

— डेनिलसन सिया मिया

@AlexanderB अगर यह सच है, तो मैं falseएक प्रोप के माध्यम से बच्चे के घटक को कैसे स्पष्ट कर सकता हूं ?

— ब्रूस सन

@ ब्रूससून, यदि संदर्भ में विशेषता "अनजाने में" गायब हो जाती है जब आप इसे गलत मान देते हैं - इसे स्ट्रिंग के रूप में पारित करने का प्रयास करें 'false'। अन्य मामलों में जब आपको तत्व पर गैर-बूलियन एचटीएमएल विशेषता की उपस्थिति को नियंत्रित करने की आवश्यकता होती है, तो आप v-ifयहां दिए गए सुझाव के साथ सशर्त प्रतिपादन का उपयोग कर सकते हैं : github.com/vuejs/vue/issues/7552#issuecomment-363695234

— अलेक्जेंडरबी

@AlexanderB मुझे लगता है कि मुझे खुद को सही करना है - मुझे कहना चाहिए attributeलेकिन नहीं prop। हम falseएक घटक संपत्ति के माध्यम से सुरक्षित रूप से स्पष्ट पारित कर सकते हैं, लेकिन विशेषता नहीं है (जो एक संपत्ति के रूप में मान्यता प्राप्त नहीं है)। क्या मैं सही हूँ?

— ब्रूस सन

Answer 1

प्रयत्न:

<input :required="test ? true : false">

Comments

लंबा रूप है<input v-bind:required="test ? true : false">

— nathanielobrown

anythingAtAll : ? true : false(या if (condition) { return true; } else { return false; }) किसी भी भाषा में ... निस्संदेह है । बस return (condition)इस मामले में उपयोग करें या,<input :required="test">

— स्टीफन पी

यदि आप सुनिश्चित हैं कि परिवर्तनशील testहै boolean, तो आप बस इस्तेमाल कर सकते हैं:required="test"

— strz

कृपया ध्यान दें कि यह घटक पर निर्भर करता है! यह संभव है कि यदि आपकी संपत्ति Stringमूल्य को स्वीकार करती है तो इसे स्थापित करने से falseआपको type checkत्रुटि मिलेगी । इसलिए इसे undefinedझूठ के बजाय सेट करें । डॉक्स

— ट्रेक्सो

का उपयोग करते हुए :required="required"जहां requiredहै मेरे लिए में एक बूलियन घटक संपत्ति परिणाम <एल आवश्यक = "आवश्यक">

— एंड्रयू Castellano

Answer 2

सबसे सरल तरीका:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

Comments

कृपया ध्यान दें कि यह घटक पर निर्भर करता है! यह संभव है कि यदि आपकी संपत्ति Stringमूल्य को स्वीकार करती है तो इसे स्थापित करने से falseआपको type checkत्रुटि मिलेगी । इसलिए इसे undefinedझूठ के बजाय सेट करें । डॉक्स

— ट्रैक्सो

@ अपने जवाब का उपयोग करते हुए दोहरे विस्मयादिबोधक बिंदुओं का उपयोग !! किया है जो मैंने कल से पहले कभी भी वाक्यविन्यास को नहीं देखा है और एक कोड समीक्षा के दौरान मैं इस पर आया हूं: - <input :required="!!!recipe.checked" v-model="recipe.pieType"><select :required="!!!recipe.checked" v-model="recipe.ingredients" :options="ingredients"></select> क्या आप जानते हैं कि !!!(3) एक :requiredमूल्य के लिए क्या मतलब है ? धन्यवाद।

— 1522 बजे क्रिस 22

@ क्रिस 22! परीक्षण और !!! परीक्षण के बीच कोई अंतर नहीं है, क्योंकि !!! परीक्षण सिर्फ !! (! परीक्षण) है और क्योंकि! परीक्षण एक बूलियन है, !! (! परीक्षण) सिर्फ इसका दोहरा नकार है, इसलिए! वही। इसे देखें: stackoverflow.com/a/25318045/1292050

— Syed

@ धन्यवाद धन्यवाद। आपके लिंक के बाद, मुझे यह भी मिल गया और मैं सहमत हूं । : ^)

— क्रिस 22

क्या @Syed कहा झूठ नहीं है

— गुडसन

Answer 3

<input :required="condition">

आप की जरूरत नहीं है <input :required="test ? true : false">क्योंकि अगर परीक्षण है truthy आप पहले से ही मिल जाएगा requiredविशेषता है, और अगर परीक्षण है falsy आप विशेषता नहीं मिलेगा। true : falseहिस्सा ज्यादा इस तरह अनावश्यक है, ...

if (condition) {
    return true;
} else {
    return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed

इस बंधन को करने का सबसे सरल तरीका है <input :required="condition">

केवल अगर परीक्षण (या स्थिति ) गलत व्याख्या की जा सकती है, तो आपको कुछ और करने की आवश्यकता होगी; उस मामले में सैयद की !!चाल का उपयोग करता है।
  <input :required="!!condition">

Answer 4

आप booleanइसे !!चर कर गुजर सकते हैं , चर से पहले डाल सकते हैं ।

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

लेकिन मैं निम्नलिखित मामले के लिए आपका ध्यान आकर्षित करना चाहूंगा जहां प्राप्त घटक ने प्रॉपर के typeलिए परिभाषित किया है। उस स्थिति में, यदि isRequiredप्रकार परिभाषित किया गया है , तो इसे stringपास booleanकरने से टाइप चेक विफल हो जाता है और आपको Vue चेतावनी मिलेगी। यह तय करने के लिए कि आप उस प्रस्ताव को पारित करने से बचना चाहते हैं, इसलिए केवल undefinedफ़ॉलबैक डालें और वह प्रस्ताव भेजा नहीं जाएगाcomponent

let isValue = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>

व्याख्या

मैं एक ही समस्या के माध्यम से किया गया है, और उपरोक्त समाधान की कोशिश की !! हां, मैं नहीं देख रहा हूं propलेकिन वास्तव में जो यहां जरूरी है वह पूरा नहीं करता है।

मेरी समस्या -

let isValid = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist': false"
/>

उपरोक्त मामले में, मुझे जो उम्मीद my-propथी वह चाइल्ड कंपोनेंट में पास नहीं हो रही है - <any-conponent/>मुझे इसमें दिखाई नहीं दे रहा है prop, DOMलेकिन मेरे <any-component/>कंपोनेंट में, प्रॉपर टाइप चेक फेल होने से एक त्रुटि सामने आती है । बाल घटक के रूप में, मैं my-propएक होने की उम्मीद कर रहा हूं Stringलेकिन यह है boolean।

myProp : {
 type: String,
 required: false,
 default: ''
}

जिसका मतलब है कि चाइल्ड कंपोनेंट को प्रोप प्राप्त हुआ भले ही वह हो false। यहाँ ट्वीक बच्चे घटक को लेने के लिए default-valueऔर चेक को छोड़ना है। undefinedहालांकि काम पारित !

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
 

यह काम करता है और मेरे बच्चे के प्रस्ताव का डिफ़ॉल्ट मान है।

Answer 5

Html उपयोग में

<input :required="condition" />

और जैसे डेटा प्रॉपर्टी में परिभाषित करते हैं

data () {
   return {
      condition: false
   }
}