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