作成日: 2023/03/28 最終更新日: 2023/03/28
文書種別
制限事項
発生環境
Vue.jsでのみ発生
詳細
MultiSelectのテンプレート(wj-item-template)にHTMLのinput要素を追加し双方向バインディングを行った状態でテキスト入力すると、動作が不正になります。
回避方法
テンプレートの代わりに、下記のようにformatItemイベントを使用してinput要素を挿入してください。
<script>
const formatItem = (s, e) => {
let inputAddr = document.createElement('input');
inputAddr.type = 'text';
inputAddr.addEventListener('input', updateAddress);
inputAddr.addEventListener('blur', () => {s.collectionView.refresh()});
inputAddr.value = e.data.address;
e.item.querySelector('#addressLabel').innerText = e.data.address;
e.item.appendChild(inputAddr);
};
</script>
<template>
<wj-multi-select
:formatItem="formatItem"
・・・