multiField_vue.html

## multiField_vue.html
<!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>