download属性の表示/非表示を真偽値で管理したい

Question

前提・実現したいこと

Vue.jsを使っています。
download属性の表示/非表示を真偽値で管理したいのですが、やり方がわかりません。
v-bindを使うと（当然かも知れませんが）普通にバインディングされてしまいます。

問題のコード

<template>
  <a :href="href" :download="canDownload">
    sample
  </a>
</template>

<script>
export default {
  data: () => ({
    href: 'test.pdf',
    canDownload: true
  })
}
</script>

<a href="test.pdf" download="true">
  sample
</a>

実際にDLされるのはtrue.pdf

望んでいる結果

<!-- canDownloadがtrue-->
<a href="test.pdf" download>
  sample
</a>

<!-- canDownloadがfalse-->
<a href="test.pdf">
  sample
</a>

補足情報（FW/ツールのバージョンなど）

vue: 2.6.10

Comments

[miyabi_pudding]

v-bindを省略せず記載しても結果は同じでしょうか？？

[chibi144]

「v-bind:download="canDownload"」にしてみても、出力結果は「download="true"」のままでした。

Answer 1

属性値だけを設定したい場合はv-ifで分岐させるしかないと思います。

<template>
  <a v-if="canDownload" :href="href" download>
    sample
  </a>
  <a v-else :href="href">
    sample
  </a>
</template>

Comments

[chibi144]

ご回答ありがとうございます。そうするしかないのですね…。