作成日: 2020/09/07 最終更新日: 2020/09/07
文書種別
制限事項
詳細
以下のように、Vue.jsのreactiveAPIでCollectionViewをラップすると、CollectionViewの動作が不正になります。
◆サンプルコード
----------------------------------------------------
const state = reactive({
cv: new CollectionView([
{ c1: "TEST01", c2: "TEST02" },
{ c1: "TEST11", c2: "TEST12" },
]),
----------------------------------------------------
この現象は制限事項です。
◆サンプルコード
----------------------------------------------------
const state = reactive({
cv: new CollectionView([
{ c1: "TEST01", c2: "TEST02" },
{ c1: "TEST11", c2: "TEST12" },
]),
----------------------------------------------------
この現象は制限事項です。
回避方法
以下のようにCollectionViewをハンドリングします。
◆サンプルコード
----------------------------------------------------
setup() {
const initialData = [];
const state = reactive({
//templateのFlexGridの外でdataの変更を表示するために使用することができます
data: initialData,
});
const cv = new CollectionView(initialData);
cv.collectionChanged.addHandler(e => {
// データを新しい配列に置き換えて、vueがFlexGridの変更を追跡できるようにします
state.data = [].concat(cv.sourceCollection);
})
return {
cv,
...toRefs(state),
}
}
----------------------------------------------------
◆サンプルコード
----------------------------------------------------
setup() {
const initialData = [];
const state = reactive({
//templateのFlexGridの外でdataの変更を表示するために使用することができます
data: initialData,
});
const cv = new CollectionView(initialData);
cv.collectionChanged.addHandler(e => {
// データを新しい配列に置き換えて、vueがFlexGridの変更を追跡できるようにします
state.data = [].concat(cv.sourceCollection);
})
return {
cv,
...toRefs(state),
}
}
----------------------------------------------------
旧文書番号
85971