vue.jsで予定管理アプリを制作しています。予定をタイトルのみで並べ、そのタイトルをクリックすると予定の詳細がdialogとして表示されるようにしたいと思い、http://element.eleme.io/#/en-US/component/dialogのelementのdialog basic usageを利用としようとしています。
画像のようにdialogをクリックすると一旦画面が暗くなりもう一度画面をクリックすると明るくなります。どうしてでしょうか?
また、dialogのtitleの部分を予定の配列event.titleにしたいのですが、titleの属性がstringであるためか、どう記述しても入力したものがそのままtitleとなってしまいます。どうすればよいでしょうか。
5行目でon clickされたときにtitleにevent.titleを入れて、9行目でtitle="title"でいけないかと思いましたがいけませんでした。プログラミング初心者なのでわからないことは多いですが、よければ教えていただけると幸いです。
calendar.vue
<template> <vue-event-calendar :events="events"> <template scope="props"> <el-button v-for="(event, index) in props.showEvents" @click="dialogVisible = true,title = event.title"> {{event.title}}</el-button> <el-dialog title="title" :visible.sync="dialogVisible" width="80%"> <span>This is a message</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">Close</el-button> <el-button type="primary" @click="dialogVisible = false">Edit</el-button> </span> </el-dialog> </template> </vue-event-calendar> </template> <script> import Vue from 'vue' import 'vue-event-calendar/dist/style.css' import vueEventCalendar from 'vue-event-calendar' import { mapState ,mapGetters ,mapMutations} from 'vuex' export default { data(){ return{ dialogVisible: false, title:'' }; }, computed:{ ...mapState(['events']), }, } Vue.use(vueEventCalendar, {locale: 'en'}) </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/13 16:21