開発環境 ・ Ruby on Rails 5.0.1 ・ Vue.js 2.0.0
現在、Ruby on Railsプロジェクト内でモーダルウインドウを作成したいのですが、プロジェクトの仕様上、
表示させたいファイル内にある「モーダルボタン」と「モーダル自体」が分離しているため、Vue.jsのリファレンスを見ても応用できておりません。
何かアドバイスがあれば幸いです。よろしくお願いします。
※「モーダルボタン」と「モーダル自体」が分離している
<div>が分離している。 「モーダルボタン」と「モーダル自体」は違うdivで生成しているため、そこの紐付けが必要。HTML
1<ul> 2... 3 <div id="turn_table"> 4 <li><a id="open-modal" @click="openModal = true">モーダルリンク</a></li> 5 </div> 6</ul> 7 8<div id="turn_table_modal"><turn-table-modal></turn-table-modal></div> 9
JS
1import Vue from 'vue/dist/vue.esm' 2import VueI18n from 'vue-i18n' 3import TurnTable from './components/app/TurnTable' 4 5// 言語設定 6Vue.use(VueI18n); 7const data = require('./locales/messages.json'); 8let i18n = new VueI18n({ 9 locale: 'ja', // set locale 10 messages: data, // set locale messages 11}); 12 13new Vue({ 14 i18n: i18n, 15 el: '#turn_table', 16 method: { 17 openModal: function() { 18 el: #turn_table_modal, 19 component: TurnTable, 20 template: <TurnTableModal /> 21 } 22 } 23}); 24
Vue
1TurnTable.vue 2
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー