現在モーダルウインドウ実装に挑戦しております。
下記のCodeはユーザーがお気に入りの写真を「アップロード」し終えた後、
モーダルウインドウが現れ、新しく登録した写真を含むこれまでの写真が表示されて
「確認」ボタンを押す流れを再現しようとしているものです。
しかし現状、アップロード後にajaxでデータを取ってきた後、モーダルウインドウにデータがセットされていません。
どのようにすればモーダルウインドウの部分にデータをセットすることが出来るでしょうか。
javascript
1<template> 2<div> 3 <!-- upload --> 4 <div class="button__action"> 5 <button type="button" @click="uploadData(originalData.image)">upload</button> 6 </div> 7 <!-- Modal window --> 8 <modal name="modal-view"> 9 <div> 10 <div class="modal__box" v-if="modalList.list"> 11 <img :src="modalList.list.url"> 12 <p class="image__name">{{modalList.list.name}}</p> 13 </div> 14 15 <button type="button" @click="submit">Confirm</button> 16 </div> 17 </modal> 18</div> 19</template> 20 21<script> 22import { post } from './handler/api' 23import { toFormat } from './handler/form' 24 25export default { 26 props: { 27 originalData: { 28 type: Object, 29 required: true, 30 } 31 }, 32 data: function(){ 33 return { 34 modalList : { 35 list : [], 36 }, 37 } 38 }, 39 methods: { 40 showModal () { 41 this.$modal.show('modal-view'); 42 }, 43 uploadData() { 44 const form = toFormat({image: this.originalData.image}) 45 post(`/api/upload/`, form) 46 .then((res) => { 47 if(res.data) { 48 Vue.set(this.$data, 'modalList', res.data.list); 49 this.$modal.show('modal-view'); 50 } 51 }) 52 .catch((err) => { 53 //error 54 }) 55 }, 56 submit() { 57 58 } 59 } 60} 61</script> 62
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/23 15:54