#前提
初心者が手探りでやった結果です。
あと、Vue-CLIとかWebpackとか全く触ってないのでその辺にすら達してない方向けです。
Vue-js-modalとかいうのも使ってます
完成しきる前に忘れないように書いてるから動かないかも~~（指摘されたら直します）~~
Vue version: 2.6.11
#やりたいこと
- 表示させたいデータを
const dataList = {...}って感じで用意 -
templateをつかっていい感じにリストを表示 - 要素をクリックするとモーダルウィンドウ表示
つまり要素がクリックされるまでモーダルウィンドウの中身は決まってない。
#公式のサイト見てできなかったこと
公式サイトのやり方はモーダルの中身固定じゃん(憤怒)
じゃなくてモーダルの中身を動的に生成したいんじゃ
#いいからできたもん見せろよ
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.31/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.31/dist/styles.css">
</head>
<!--...>8...-->
<div id="sampleList">
<ul>
<template-sample v-for="listItem in sampleList" :value="listItem" @open-id="openMethod"></template-sample>
</ul>
<div class="modalBox">
<modal name="sampleModal">
<div class="modalMask">
<div class="modalWrapper">
<div class="modalMainContainer">
<div class="modal-header modalSampleImage">
<!-- ここの画像とかもsampleData.***でひっぱれそう -->
<img src="image/default.jpg" @error="altSrc">
</div>
<div class="modal-body modalSampleInformation">
<p>{{ sampleData.sampleName }}</p>
<div class="modalCloseBtn">
<button class="modal-default-button" @click="hide">閉じる</button>
</div>
</div>
</div>
</div>
</div>
</modal>
</div>
</div>
<!--Vue.jsは閉じbodyタグの直前-->
<script>
//作ってる最中はデバッグ用に(Chrome 拡張機能のため)
Vue.config.devtools = true;
//ここまで
//Vue-js-modal
const VModal = window["vue-js-modal"].default;
Vue.use(VModal);
//ここまで
//画像が404の時に代替画像を見せる
function errorImgSrc(e) {
return e.target.src = 'image/default.jpg'
}
</script>
<script src="script/dataList.js"></script>
<script src="script/sampleList.js"></script>
<script>
//多分外部ファイルにしたほうがいい気がする（それ以前の問題な気もする）
var sample = new Vue({
el: "#sampleList",
data: function () {
return {
sampleList: dataList,
showModal: false,
sampleData: ''
}
},
methods: {
show: function () {
this.$modal.show('sampleModal');
},
hide: function () {
this.$modal.hide('sampleModal');
},
openMethod: function (value) {
this.sampleData = dataList[value];
this.show()
},
altSrc(e) {
errorImgSrc(e)
}
}
})
</script>
const dataList = [
{ id: '0', sampleName: 'John Doe' }
//...>8...
]
Vue.component('template-sample', {
props: ['value'],
template: `
<li class="sampleList-item" @click="showModalMethod(value.id)">
<img :src="'image/' + value.id + '.jpg'" @error="altSrc">
<p>{{ value.sampleName }}</p>
</li>`,
methods: {
altSrc(e) {
errorImgSrc(e)
},
showModalMethod(value) {
this.$emit('open-id', value)
}
}
})
（デモデータとかがなかったので、gif画像とかは）ないです
もっと色々書いたほうがいいんだろうけどもうすでに忘れてるのでコピペすれば使える部分だけ切り抜きました。
多分もっと技術ある人なら無駄なく書ける気がします。
#ここまで作るのに3日かかった
PHPの公式サイトとかもそうだけど、公式のドキュメントってどうしてわかる人向けにしか書いてないんでしょうね。
一番早いやり方はすでにうまく動くとされてるコードをコピペして動くか確認。そこからちょっとずつ書き換えていく方法が手っ取り早いと思います。どうせわかんないならね。
#公式サイトの該当ページ
モーダルコンポーネント の例:https://jp.vuejs.org/v2/examples/modal.html
#くっそ沼ったあたりでみてたQiita記事
（ただしこれらを使ってるとは限らない）
【JavaScript】アロー関数式を学ぶついでにthisも復習する話：https://qiita.com/mejileben/items/69e5facdb60781927929
Vue.jsでコンポーネントの親子間でデータのやり取りを行う方法：
https://qiita.com/rhistoba/items/9e8521d7310ee9e3a226
JavaScript で forEach を使うのは最終手段：https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce
#参考：Vue.jsがわからなくて最初に写経したサイト
とりあえずここの上から順に写経して動かしてみてました
http://www.tohoho-web.com/ex/vuejs.html