vue.jsで増減機能が付いたプルダウンメニュー作成について

kintoneでvue.jsを使用して、プラグイン開発をしています。プラグインでは、プルダウンメニューを作成しており、アプリのフィールド名を表示できるようにしています。ただ、複数の要素がある時に、プルダウンメニューに表示ができなくなってしまいます。getConfigをした時に、複数要素を表示させる方法を教えて頂きたいです。

単一だと、保存・表示はできています。

以下、わかっている修正箇所(単一で動作するコードをdocumentとしているため未変更)

 

config.html

 

<section class=“settings”>
  <h2 class=“settings-heading”>zzzzzzzzzzzzzzzzzzzzz</h2>

  <form id=“settings” class=“js-submit-settings”>
    <table class=“standard-table”>
      <thead>
        <tr>
          <th>
            <a v-if=“addresses.length === 0” @click=“addTable”>
              <i class=“fa-solid fa-circle-plus”></i>
            </a>
            <br />
          </th>
          <th>郵便番号</th>
        </tr>
      </thead>

      <!-- テーブルの追加・削除ボタン –>
      <tbody>
        <tr v-for=“(address, ix) in addresses”>
          <td>
            <a @click=“addTable”><i class=“fa-solid fa-circle-plus”></i></a>
            <a @click=“removeTable(ix)”><i class=“fa-solid fa-circle-minus”></i></a>
          </td>

          <!-- 郵便番号 –>
          <td>
            <div class=“kintoneplugin-input-outer”>
              <select class=“kintoneplugin-input-text” v-model=“address.zipcode”>
                <option value=“” selected>選択してください</option>
                <option v-for=“field in fields” :value=“field.value”>{{ field.label }}</option>
              </select>
            </div>
            <div class=“kintoneplugin-alert” v-if=“address.zipcode.length === 0”>
              <p>必須です。</p>
            </div>
          </td>

          <!-- テーブルの締め –>
      </tbody>
    </table>

    <!-- 保存・キャンセルボタン –>
    <p class=“kintoneplugin-row”>
      <button type=“button” class=“js-cancel-button kintoneplugin-button-dialog-cancel” @click=“cancel”>キャンセル</button>
      <button type=“button” class=“kintoneplugin-button-dialog-ok” @click=“save”>保存</button>
    </p>
  </form>
</section>

 

 

 

config.js

 

(function (PLUGIN_ID) {
  ‘use strict’;

  const initVue = (data, fields) => {
    new Vue({
      el: ‘#settings’, data: Object.assign(data, {
        fields: fields.map(field => {
          return { label: field.label, value: field.code };
        }),
      }),
      methods: {
        // add
        addTable: function () { this.addresses.push({ zipcode: ‘’ }); },
        // remove
        removeTable: function (index) { this.addresses.splice(index, 1); },

        getKeyLength: function () {
          let set = new Set();
          for (let address of this.addresses) {
            set.add(address.zipcode);
          }
          return set.size;
        },

        // save
        save: function () {
          if (document.getElementsByClassName(‘kintoneplugin-alert’).length > 0) {
            alert(‘入力にエラーがあるため登録できません。エラーを全て解消してください。’);
            return;
          }

          // ここでpushかfor文で回す
          let addresses = {};
          for (let address of this.addresses) {
            let zipcode = address.zipcode;
            addresses = JSON.stringify({ zipcode: zipcode });
          }

          // alert(‘let addresses’ + JSON.stringify(addresses));

          // setConfig
          let conf = {};
          conf.address = addresses;
          kintone.plugin.app.setConfig(conf);
        },

        // cancel
        cancel: function () {
          window.location.href = ‘…/…/’ + kintone.app.getId() + ‘/plugin/’;
        }
      }
    });
  }

  // start
  const start = async (PLUGIN_ID) => {
    // kintone getField
    const { properties } = await kintone.api(kintone.api.url(‘/k/v1/app/form/fields’, true), ‘GET’, { app: kintone.app.getId() });
    const fields = Object.keys(properties).map(key => {
      const field = properties[key];

      // SINGLE_LINE_TEXT" or NUMBER
      if (field.type === ‘SINGLE_LINE_TEXT’ || field.type === ‘NUMBER’) {
        // code / label
        return { code: key, label: field.label };
      }
      // filter
    }).filter(Boolean);

    // getConfig
    let config = kintone.plugin.app.getConfig(PLUGIN_ID);
    let addresses = [];
    for (let key in config) {
      let address = JSON.parse(config[key]);

      // alert(‘let address’ + JSON.stringify(address));

      addresses.push({ zipcode: address.zipcode });
    }

    // kintone Vue.js
    initVue({ addresses: addresses }, fields)
  };
  start(PLUGIN_ID);

})(kintone.$PLUGIN_ID);

追記: 以下、わかっている修正箇所(単一で動作するコードをdocumentとしているため未変更)

 

let addresses = []; 
          for (let address of this.addresses) {
            let zipcode = address.zipcode;
            addresses.push({
              zipcode: zipcode
            });
          }
          conf.address = JSON.stringify(addresses);