【Vue.js & Element Plus】Element Plusスライダーに、ループ回して画像をバインドする方法

投稿：2024/05/01｜ 更新： 2024/05/05 ｜ 2276文字

今回は、Vue.js & ライブラリElement Plusで使用できるスライダーについて、画像をバインドする方法を紹介します。前回のサンプルでは、単純に文字＆背景だけのスライダーになりましたが、実際のサイト運用のように画像をバインドするには、どうしたらよいでしょうか。早速確認していきましょう。

1 前回の課題～Element Plusスライダーでの、画像のバインド
2 Element Plusスライダーに画像をバインドするコードと表示例
- 2.1 コード例（html&javascript）
- 2.2 表示例
3 あとがき・まとめ

前回の課題～Element Plusスライダーでの、画像のバインド

前回作ったVue.js & Element Plusのスライダーでは、Element Plus公式のサンプルからそのままコードを拝借しただけで、画像がバインドされているわけではありませんでした。だからといって、単純に以下のようなコード・・・

■スライダー表示部分
<el-carousel-item v-for="item in 6" :key="item">
　<img src="./imgs/00.{{item}}jpg"/>
</el-carousel-item>

では、画像は表示されません（展開されずmgs/00.{{item}}jpgというurlがそのまま出る）。今回はこれに画像バインドするにはどうしたらよいかを検討します。

前回記事【Vue.js】Element Plusで、スライダー・ブログカード・ボタン・トグルメニューをサクッと作る
https://division-web.atelier-ss-agency.com/10133/vue-js-element-plus/

Element Plusスライダーに画像をバインドするコードと表示例

コード例（html&javascript）

ＣＳＳはElement Plusにあったものから変更していないのですが、html&javascriptについては以下のように変更しました。

■html
<el-carousel :interval="4000" type="card" height="300px">
　<el-carousel-item v-for="item in imgpath" :key="item">
　　　<h3 text="2xl" justify="center"><img :src="item"/></h3>
　</el-carousel-item>
</el-carousel>

ポイントは『v-for="item in imgpath"』ってところです。imgpathはvueインスタンス内にある配列で、画像urlがまとめて入っています。これをループで回してバインドしていきます。また『img :srcは、img v-bind:srcの短縮形』だそうです。

■javascript
<script>
const sampleApp = {
data() {
　return {
　　imgpath :['./imgs/001.jpg','./imgs/002.jpg','./imgs/003.jpg','./imgs/004.jpg','./imgs/005.jpg'],
　　　};
　},
};
const app = Vue.createApp(sampleApp);
app.use(ElementPlus);
app.mount("#app");
</script>

javascript・vueアプリケーションインスタンス部分です。data内に新しくimgpathという配列を定義しました。この中にスライダーの画像のパスが入っています。