VueJS শর্তসাপেক্ষে একটি উপাদানের জন্য একটি বৈশিষ্ট্য যুক্ত করে

Question

ভ্যুজেএস-এ আমরা ভি-ইফ ব্যবহার করে একটি ডোম উপাদান যুক্ত বা সরাতে পারি:

<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#Atributes )

— আলেকজান্ডারবি

বাস্তবিক, ডকুমেন্টেশন বলেছেন অ্যাট্রিবিউট যুক্ত হবে না যদি "... এর মূল্য আছে null, undefinedঅথবা false" যা মিথ্যার মূল্যায়ন একটি জাতীয় স্ক্রিপ্ট থেকে ভিন্ন। এর অর্থ জাভাস্ক্রিপ্টে একটি খালি স্ট্রিং মিথ্যা, তবে তবুও এটি ডিওএম-তে এই বৈশিষ্ট্যটি যুক্ত করবে। আপনি যে চেষ্টা করতে পারেন তা রোধ করতেv-bind:name="name || false"

— ডিলিলসন সা মিয়া

@ আলেকজান্ডারবি যদি এটি সত্য হয় তবে কীভাবে আমি কোনও প্রোমের falseমাধ্যমে শিশু উপাদানকে স্পষ্টভাবে পাস করতে পারি ?

— ব্রুস সান

@ ব্রুসসুন, আপনি যদি মিথ্যা মান দিলে "অনিচ্ছাকৃতভাবে" প্রসঙ্গের বৈশিষ্ট্যটি অদৃশ্য হয়ে যায় - এটিকে স্ট্রিং হিসাবে পাস করার চেষ্টা করুন 'false'। অন্যান্য ক্ষেত্রে যখন আপনাকে এলিমেন্টে নন-বুলিয়ান এইচটিএমএল বৈশিষ্ট্যের উপস্থিতি নিয়ন্ত্রণ করতে হবে আপনি v-ifএখানে পরামর্শ মতো শর্তযুক্ত রেন্ডারিং ব্যবহার করতে পারেন : github.com/vuejs/vue/issues/7552#issuecomment-361395234

— আলেকজান্ডারবি

@ আলেকজান্ডারবি আমার মনে হয় আমাকে নিজের সংশোধন করতে হবে - আমার বলা উচিত attributeতবে তা করা উচিত নয় prop। আমরা falseকোনও উপাদান সংস্থার মাধ্যমে সুস্পষ্টভাবে পাস করতে পারি তবে বৈশিষ্ট্য নয় (যা সম্পত্তি হিসাবে স্বীকৃত নয়)। আমি কি সঠিক?

— ব্রুস সান

Answer 1

চেষ্টা করুন:

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

Comments

লম্বা ফর্মটি হ'ল<input v-bind:required="test ? true : false">

— নাথানিয়েলোব্রাউন

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তা ব্যবহার করে <এল প্রয়োজনীয় = "আবশ্যক">

— অ্যান্ড্রু ক্যাসেটেলানো

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মানটির অর্থ কী ? ধন্যবাদ।

— ক্রিস 22

@ ক্রিস 22! পরীক্ষা এবং !!! পরীক্ষার মধ্যে কোনও পার্থক্য নেই, যেহেতু !!! পরীক্ষাটি কেবল !! (! পরীক্ষা) এবং কারণ! পরীক্ষাটি বুলিয়ান, !! (! পরীক্ষা) কেবল তার দ্বিগুণ প্রত্যাখ্যান, তাই একই। এটি দেখুন: স্ট্যাকওভারফ্লো.com

— সৈয়দ

@ চোখের ধন্যবাদ আপনার লিঙ্কটি অনুসরণ করে, আমি এটির পাশাপাশি খুঁজে পেয়েছি এবং আমি সম্মত । : ^)

— ক্রিস 22

@ সাইয়েড যা বলেছে তা অসত্য নয়

— ২১'১১

Answer 3

<input :required="condition">

আপনার দরকার নেই <input :required="test ? true : false">কারণ যদি পরীক্ষাটি সত্যবাদী হয় তবে আপনি ইতিমধ্যে requiredবৈশিষ্ট্যটি পাবেন এবং যদি পরীক্ষা মিথ্যা হয় তবে আপনি বৈশিষ্ট্যটি পাবেন না। 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তা পরীক্ষা করতে ব্যর্থ হয় এবং আপনি ভ্যু সতর্কতা পাবেন। এটি ঠিক করতে যে আপনি সেই প্রপকে পাশ কাটাতে চাইতে পারেন, তাই কেবল 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

এইচটিএমএল ব্যবহারে

<input :required="condition" />

এবং ডেটা সম্পত্তি পছন্দ হিসাবে সংজ্ঞায়িত

data () {
   return {
      condition: false
   }
}