VueJS เพิ่มแอตทริบิวต์สำหรับองค์ประกอบตามเงื่อนไข

119

ใน VueJS เราสามารถเพิ่มหรือลบองค์ประกอบ DOM โดยใช้ v-if:

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

แต่มีวิธีเพิ่ม / ลบแอตทริบิวต์ขององค์ประกอบ dom เช่นสำหรับการตั้งค่าแอตทริบิวต์ที่ต้องการตามเงื่อนไขต่อไปนี้:

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

โดยสิ่งที่คล้ายกับ:

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

ความคิดใด ๆ ?

javascript vue.js vuejs2

— ดอนสมิต
แหล่งที่มา

4

แม้ว่าจะไม่ชัดเจนนัก (ด้วยเหตุนี้ความสับสน) เอกสารก็บอกว่าหากค่าแอตทริบิวต์ประเมินว่าเป็นเท็จแอตทริบิวต์จะถูกละเว้น ( vuejs.org/v2/guide/syntax.html#Attributes )

— AlexanderB

ที่จริงเอกสารกล่าวว่าแอตทริบิวต์จะไม่ถูกเพิ่มถ้า“... มีค่าของnull, undefinedหรือfalse”ซึ่งจะแตกต่างจากสคริปต์ JS ประเมินเป็นเท็จ ซึ่งหมายความว่าสตริงว่างใน JavaScript เป็นเท็จ แต่จะยังคงเพิ่มแอตทริบิวต์ให้กับ DOM เพื่อป้องกันไม่ให้คุณสามารถลองได้v-bind:name="name || false"

— Denilson Sá Maia

@AlexanderB หากเป็นเช่นนั้นจริงฉันจะส่งต่ออย่างชัดเจนfalseไปยังองค์ประกอบย่อยผ่านทางเสาได้อย่างไร

— Bruce Sun

@BruceSun ถ้าแอตทริบิวต์ในบริบท "โดยไม่ได้ตั้งใจ" จะหายไปเมื่อคุณให้มันคุ้มค่าที่เป็นเท็จ - 'false'พยายามที่จะผ่านมันเป็นสตริง ในกรณีอื่น ๆ เมื่อคุณต้องการควบคุมการมีอยู่ของแอตทริบิวต์ html ที่ไม่ใช่บูลีนในองค์ประกอบคุณสามารถใช้การแสดงผลแบบมีเงื่อนไขv-ifตามที่แนะนำไว้ที่นี่: github.com/vuejs/vue/issues/7552#issuecomment-361395234

— AlexanderB

@AlexanderB ฉันคิดว่าฉันมีเพื่อแก้ไขตัวเอง - ผมควรจะพูดแต่ไม่attribute propเราสามารถส่งfalseผ่านคุณสมบัติที่ชัดเจนได้อย่างปลอดภัยผ่านคุณสมบัติขององค์ประกอบ แต่ไม่ใช่แอตทริบิวต์ (ซึ่งไม่ได้รับการยอมรับว่าเป็นคุณสมบัติ) ฉันถูกไหม?

— Bruce Sun

128

ลอง:

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

— cymruu
แหล่งที่มา

9

แบบยาวคือ<input v-bind:required="test ? true : false">

— nathanielobrown

8

anythingAtAll : ? true : false(หรือif (condition) { return true; } else { return false; }) ในภาษาใด ๆ คือ ... ไม่สมควร แค่ใช้return (condition)หรือในกรณีนี้<input :required="test">

— Stephen P

5

หากคุณแน่ใจว่าตัวแปรtestนั้นคือbooleanคุณสามารถใช้:required="test"

— strz

2

โปรดทราบว่าขึ้นอยู่กับส่วนประกอบ! เป็นไปได้ว่าหากคุณสมบัติของคุณยอมรับStringค่าที่ตั้งค่าเป็นfalseคุณจะได้รับtype checkข้อผิดพลาด ดังนั้นตั้งค่าundefinedเป็นเท็จแทน เอกสาร

— Traxo

การใช้คุณสมบัติส่วนประกอบบูลีนอยู่:required="required"ที่ไหนrequiredผลลัพธ์ใน <el required = "required"> สำหรับฉัน

— Andrew Castellano

65

รูปแบบที่ง่ายที่สุด:

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

— ไซ
แหล่งที่มา

1

โปรดทราบว่าขึ้นอยู่กับส่วนประกอบ! เป็นไปได้ว่าหากคุณสมบัติของคุณยอมรับStringค่าที่ตั้งค่าเป็นfalseคุณจะได้รับtype checkข้อผิดพลาด ดังนั้นตั้งค่าundefinedเป็นเท็จแทน เอกสาร

— Traxo

@ ระบุคำตอบของคุณโดยใช้เครื่องหมายอัศเจรีย์คู่!! ฉันไม่เคยเห็นไวยากรณ์นั้นมาก่อนเมื่อวานนี้และในระหว่างการตรวจสอบโค้ดฉันเจอสิ่งนี้: -

<input :required="!!!recipe.checked" v-model="recipe.pieType"><select :required="!!!recipe.checked" v-model="recipe.ingredients" :options="ingredients"></select>

คุณรู้ไหมว่า!!!(3) หมายถึงอะไรสำหรับ:requiredค่า? ขอบคุณ.

— ริส 22

2

@ Chris22 ไม่มีความแตกต่างระหว่าง! test และ !!! test เนื่องจาก !!! test เป็นเพียง !! (! test) และเพราะ! test เป็นบูลีน !! (! test) เป็นเพียงการปฏิเสธสองครั้งดังนั้น เหมือนกัน. ตรวจสอบสิ่งนี้: stackoverflow.com/a/25318045/1292050

— Syed

@ ขอบคุณครับ ต่อไปนี้การเชื่อมโยงของคุณผมพบว่าคนนี้เป็นอย่างดีและผมเห็นด้วย : ^)

— ริส 22

สิ่งที่ @Syed พูดนั้นไม่จริง

— goodson

16

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

— สตีเฟนพี
แหล่งที่มา

11

คุณสามารถส่งผ่าน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จะเป็นแต่มันเป็นStringboolean

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

falseซึ่งหมายความว่าองค์ประกอบที่เด็กไม่ได้รับเสาแม้ว่าจะเป็น ปรับแต่งในที่นี้คือให้องค์ประกอบลูกรับdefault-valueและข้ามการตรวจสอบไปด้วย ผ่านundefinedผลงาน!

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

สิ่งนี้ใช้งานได้และเสาลูกของฉันมีค่าเริ่มต้น

— สัตยัมปฐก
แหล่งที่มา

2

ในการใช้ html

<input :required="condition" />

และกำหนดในคุณสมบัติข้อมูลเช่น

data () {
   return {
      condition: false
   }
}

— นิปุ ณ เชน
แหล่งที่มา