VueJS는 조건부로 요소에 대한 속성을 추가합니다.

VueJS는 조건부로 요소에 대한 속성을 추가합니다.

---

VueJS에서는 v-if를 사용하여 DOM 요소를 추가하거나 제거 할 수 있습니다.

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

어떤 아이디어?

---

시험:

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

---

가장 간단한 형태 :

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

---

<input :required="condition">

테스트 가 진실<input :required="test ? true : false"> 이면 이미 속성을 얻고 테스트 가 거짓 이면 속성을 얻지 못 하기 때문에 필요하지 않습니다 . 부분은 많은 같이, 중복 ...requiredtrue : 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">

테스트 (또는 조건 )가 잘못 해석 될 수있는 경우에만 다른 작업을 수행해야합니다. 이 경우 Syed의 사용이 !!트릭 을 수행합니다.
  <input :required="!!condition">

---

나는 같은 문제를 겪었고 위의 해결책을 시도했다 !! 예, 나는 보이지 prop않지만 실제로 여기에서 필요한 것을 충족하지 못합니다.

내 문제 -

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

위의 경우, 내가 한되지 기대했던 my-prop아이 컴퍼넌트에 전달받을 - <any-conponent/>I가 표시되지 않습니다 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"
/>

이것은 작동하고 내 자식 소품에는 기본값이 있습니다.

참고 URL : https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element