White Space
WebLife

【Vue.js】複数の属性をまとめて出力する

  • Vue

React では複数の属性を、

const attributes = {
  target: '_blank',
  href: 'piyo'
};
<a {...attributes}>リンク</a>

⇓

<a href="piyo" target="_blank">リンク</a>

のようにして出力することができますが、これを Vue.js で行います。

まとめて属性を出力

...
props: {
  href: String,
  target: {
    type: String,
    default: '_self'
  }
}
computed: {
  attributes() {
    return {
      href: this.href,
      target: this.target,
    }
  }
},
template: `
  <a v-bind="attributes">
`,
...

こんなコンポーネントを作ることは無いと思いますが、computedメソッドでattributesを定義（名前は何でもOKです）して、そのオブジェクトをそのままv-bindに指定することで、オブジェクトのkey: valueを属性として全て出力できます。

attributes()関数の中で分岐を書けば、与えられた props によって属性値を動的に変化させることもできます。

結局の所、v-bindにオブジェクトを渡してあげればそれを複数の属性として出力できます。

<div v-bind="{ myKey: '値', myKey2: '値' }">

下記の公式リファレンスにも書いてありました。

参考