Vue.jsでsrcsetを使用する方法が知りたいです。

Question

高解像度ディスプレイ用の画像とフルHDディスプレイ用の画像を用意して、表示の切り替えをVue.jsのテンプレートを使い表示の振り分けをしたいと思っております。

現在は以下のコードですが、高解像度の画像が表示されませんでした。

ご教授のほど宜しくお願い致します。

<div class="list-area">
 <ul>
    <department-template :img="imgSrc01" :srcSet="srcSet01" :alt="alt01" :title="title01" :content="content01"></department-template>
    <department-template :img="imgSrc02" :srcSet="srcSet02" :alt="alt02" :title="title02" :content="content02"></department-template>
 </ul>
</div>

new Vue({
  el: '.list-area',
  data() {
    return {
      imgSrc01: '/recruit/assets/img/top/img03.jpg',
      srcSet01: '/recruit/assets/img/top/img03.jpg 1x, /recruit/assets/img/top/[e-mail] 2x',
      alt01: '○○部門',
      title01: 'タイトル',
      content01: 'テキストテキストテキスト',

      imgSrc02: '/recruit/assets/img/top/img04.jpg',
      srcSet02: '/recruit/assets/img/top/img04.jpg 1x, /recruit/assets/img/top/[e-mail] 2x',
      alt02: '○○部門',
      title02: 'タイトル',
      content02: 'テキストテキストテキスト',
    }
  },
  components: {
    'department-template': {
      template: `
      <li>
        <img :src="img" :srcset="srcSet" :alt="alt">
        <h3>{{ title }}</h3>
        <p>{{ content }}</p>
      </li>
      `,
      props: ['img' , 'srcSet', 'alt', 'title', 'content']
    }
  }
})

Answer 1

以下でいかがでしょうか？

:srcSet="srcSet01"

↓

:srcset="srcSet01"

Comments

[rinrin1137]

HTML内ではキャメルケースが使えないのですね・・・。
初歩的なミスでした。ご回答ありがとうございました。