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">場合ので、テストがある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">

テスト（またはcondition）が誤って解釈される可能性がある場合のみ、他のことを行う必要があります。その場合、Syedがを使用すると!!うまくいきます。
  <input :required="!!condition">

変数の前booleanに置くことで、強制的に渡すことができ!!ます。

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

ただし、受信コンポーネントがtype小道具に定義されている次のケースには注意を向けたいと思います。その場合、isRequiredタイプが定義されている場合、string通過booleanするmakeのタイプチェックは失敗し、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/>いません-inは表示さ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"
/>
 

これは機能し、私の子プロップはデフォルト値を持っています。

HTMLでの使用

<input :required="condition" />

そして、次のようなデータプロパティで定義します

data () {
   return {
      condition: false
   }
}