Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.