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);