/multiField_vue.html
Last active Nov 27, 2019
Vue.jsで出力した例
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>マルチフィールドのサンプルコード（Vue.jsを使った例）</title> | |
| <!-- UIkit CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/css/uikit.min.css" /> | |
| <!-- UIkit JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit-icons.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- 入力した値をJSONにする --> | |
| <mt:SetVarBlock name="multifield"><mt:ContentField content_field="マルチフィールド"><mt:ContentFieldValue /></mt:ContentField></mt:SetVarBlock> | |
| <mt:Var name="multifield" convert_breaks="0" json_decode="1" setvar="json" /> | |
| <div id="app" class="uk-container"> | |
| <div class="uk-margin"> | |
| <template v-for="(key, value) in multiFieldJSON"> | |
| <template v-if="key.h1"><h1 class="uk-heading-bullet">{{ key.h1 }}</h1></template> | |
| <template v-if="key.h2"><h2 class="uk-heading-line"><span>H{{ key.h2 }}</span></h2></template> | |
| <template v-if="key.h3"><h3 class="uk-heading-divider">{{ key.h3 }}</h3></template> | |
| <template v-if="key.text"><p class="uk-text-small">{{ key.text }}</p></template> | |
| <template v-if="key.textarea"> | |
| <p class="uk-text-small" v-html="key.textarea.replace(/\n/g,'<br/>')"></p> | |
| </template> | |
| <template v-if="key.image"> | |
| <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body"> | |
| <img v-bind:src="key.image"> | |
| </div> | |
| </template> | |
| <template v-if="key.table"> | |
| <table class="uk-table uk-table-hover uk-table-divider"> | |
| <tbody> | |
| <template v-for="(key, value) in key.table"> | |
| <tr> | |
| <th>{{ key.title }}</th> | |
| <td>{{ key.text }}</td> | |
| </tr> | |
| </template> | |
| </tbody> | |
| </table> | |
| </template> | |
| <template v-if="key.list"> | |
| <ul class="uk-list uk-list-bullet"> | |
| <li v-for="(key, value) in key.list"> | |
| <a v-bind:href="key.url" v-if="key.url">{{ key.text }}</a> | |
| <template v-else>{{ key.text }}</template> | |
| </li> | |
| </ul> | |
| </template> | |
| <template v-if="key.figure_url"> | |
| <div class="uk-flex-middle" uk-grid> | |
| <div class="uk-width-2-3@m"> | |
| <p>{{ key.figure_text }}</p> | |
| </div> | |
| <div class="uk-width-1-3@m uk-flex-first"> | |
| <img v-bind:src="key.figure_url"> | |
| </div> | |
| </div> | |
| </template> | |
| </template> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> | |
| <script> | |
| // MTテンプレートで出力する場合は、itemsにMTタグで出力させる | |
| var items = <mt:Var name="json" to_json="1" /> | |
| var vm = new Vue({ | |
| el: '#app', | |
| data: { | |
| items: items, | |
| field_data: [], | |
| field_array_table: [], | |
| field_array_list: [] | |
| }, | |
| computed: { | |
| multiFieldJSON: function(){ | |
| var field_data = this.field_data; | |
| console.log(items.items); | |
| /** | |
| * @type {Object} | |
| */ | |
| Object.keys(items.items).forEach(function(value, index, array){ | |
| var self_items = items.items[index].data; | |
| var check_array = Array.isArray(self_items); | |
| if ( check_array ) { | |
| // console.log(items.items[index].type); | |
| if (items.items[index].type === 'table') { | |
| // console.log(items.items[index].data.length); | |
| switch (items.items[index].label) { | |
| case '表組み' : | |
| // 配列の初期化 | |
| this.field_array_table = []; | |
| console.log(items.items[index].data) | |
| Object.keys(items.items[index].data).forEach(function(data_value, data_index, data_array){ | |
| this.field_array_table.push({ | |
| title: items.items[index].data[data_index][0].data, | |
| text: items.items[index].data[data_index][1].data | |
| }); | |
| }) | |
| field_data.push({ table: this.field_array_table }); | |
| break; | |
| case 'リスト' : | |
| // 配列の初期化 | |
| this.field_array_list = []; | |
| Object.keys(items.items[index].data).forEach(function(data_value, data_index, data_array){ | |
| this.field_array_list.push({ | |
| url: items.items[index].data[data_index][0].data, | |
| text: items.items[index].data[data_index][1].data | |
| }); | |
| }) | |
| field_data.push({ list: this.field_array_list }); | |
| break; | |
| default : | |
| break; | |
| } | |
| } else if(items.items[index].type === 'multi-column-content') { | |
| switch (items.items[index].label) { | |
| case '画像単体アップロード + テキスト' : | |
| field_data.push({ | |
| figure_url: items.items[index].data[1][0].url, | |
| figure_text: items.items[index].data[0][0].data | |
| }); | |
| break; | |
| default : | |
| break; | |
| } | |
| } | |
| } else { | |
| // 単体入力値の場合 | |
| switch (items.items[index].type) { | |
| /* | |
| * 配列にオブジェクトを追加する場合は、pushに対して、{ key名 : value名 }で追加する | |
| */ | |
| case 'h1' : | |
| field_data.push({ h1: items.items[index].data }); | |
| break; | |
| case 'h2' : | |
| field_data.push({ h2: items.items[index].data }); | |
| break; | |
| case 'h3' : | |
| field_data.push({ h3: items.items[index].data }); | |
| break; | |
| case 'text' : | |
| field_data.push({ text: items.items[index].data }); | |
| break; | |
| case 'textarea' : | |
| field_data.push({ textarea: items.items[index].data }); | |
| break; | |
| case 'image' : | |
| field_data.push({ image: items.items[index].url }); | |
| break; | |
| default : | |
| break; | |
| } | |
| } | |
| }); | |
| return field_data; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment