web-dev-qa-db-ja.com

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>

何か案は？

javascriptvue.jsvuejs2
61
Don Smythe

試してください：

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

最も単純な形式：

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

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

13
Stephen P

私は同じ問題を経験しており、上記の解決策を試してみました!!はい、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"
/>

これは機能し、私の子供の小道具はデフォルト値を持っています。

0
Satyam Pathak