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">
testがtruthyの場合、すでにrequired
属性を取得するため、<input :required="test ? true : false">
は不要です。 testが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">
です
test(または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/>
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"
/>
これは機能し、私の子供の小道具はデフォルト値を持っています。