Vue.jsで出力した例
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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