Vue.js・Nuxt.jsでbindしている属性を動的に削除する方法

本業として関わっている会社のプロダクトではNuxt.jsを使用しているのですが、<input type="file" capture>のcapture属性を動的に削除する際、「あれ、どうやるんだっけ？」となってしまったので、自分への備忘録として今回のブログに書きたいと思います。

bindしている属性を動的に削除する例

今回のブログで想定する例は以下のようなものです。

<template>
  <div>
      <input
      ref="file"
      type="file"
      accept="image/*"
      capture
      @change="changeEvt($event)"
    />
  </div>
</template>

こんな感じのComponentがあったとして、input type=”file”のcapture属性について、あるときは=’enviroment’に設定し、あるときは属性自体を削除するようにしたいといった場合の例です。

<input type="file">を使いまわしたかったわけですね！

bindしている属性を動的に削除する実装方法

input type=”file”のcapture属性を例にとって、bindしている属性を動的に削除する実装方法を掲載します！

capture属性の場合はenviromentを値として設定した場合はリアカメラ、userを設定した場合はフロントカメラが起動するようになっています。

もし、capture属性自体を削除したい場合は、値にnullを設定してあげればOKです！

<template>
  <div>
      <input
      ref="file"
      type="file"
      accept="image/*"
      :capture="tool === 'camera' ? 'environment' : null"
      @change="changeEvt($event)"
    />
  </div>
</template>
// toolはComponentが所持するdataのうちの1つです

上記の場合は三項演算子を使った条件分岐で設定していますが、capture属性に限らず他の属性でも同じ方法でbindした属性の削除をすることが可能です。

例えば、src属性ですね。<img :src="null">とすれば、src属性自体が削除されます。

まとめ

ということで、Vue.js・Nuxt.jsでbindしている属性を動的に削除する方法について今回はブログに書きました！