확인란 배열이 있는 vue 3 구성 API 구성 요소 및 모두 토글
<p>우리는 typescript를 사용하여 녹아웃에서 vue 3 구성 API로 점진적으로 이동하기로 결정했으며, props 변경에 대한 안티 패턴을 이해하려고 노력하고 있습니다. 의도한 작업을 수행하는 작업 구성 요소가 있지만 기본적으로 작성 방식이 권장되는 접근 방식인지 확인하고 싶습니다. </p>
<p>매우 간단한 예는 토글이 있는 체크박스 목록 구성요소입니다. </p>
<p>가장 큰 질문은 AppList.vue에서 수행 중인 작업이 올바른지 확인하기 위해 <code>const InternalModel = toRef(props.selected ?? []);</code> 구성 요소 및 <code>selectedHandler</code> - 이벤트 및 <code>toggleAll</code>에서 OUT을 방출하도록 평가하지만 여기서는 <code>selected</code> ;내부 모델 동기화. 동일한 것에 대해 두 개의 변수를 사용하는 것은 번거롭게 느껴지지만 동시에 내부 모델이 뷰를 방해할 필요가 없기 때문에 의미가 있습니다. </p>
<p>vuejs.org에 <code>v-model</code>의 배열을 사용하여 여러 확인란을 나타낼 수 있는 예가 있다는 것을 알고 있지만 구성요소 내부나 소품이 아니기 때문에 똑같지는 않고 좀 더 복잡하게 느껴집니다. 나는 하루 종일 문제를 해결하려고 노력했지만 vue 3 검색 결과가 많지 않았고 이 특정 문제에 대한 결과를 전혀 찾지 못했습니다. </p>
<p>HomeView.vue:</p>
<p>
<pre class="brush:html;toolbar:false;"><스크립트 세트 lang="ts">
'vue'에서 { ref } 가져오기;
AppList를 가져오고, '@/comComponents/AppList.vue'에서 { type Item };
const fooItems = ref<Item[]>([
{ ID: 1, 이름: 'foo 1' },
{ ID: 2, 이름: 'foo 2' },
{ ID: 3, 이름: 'foo 3' },
{ ID: 4, 이름: 'foo 4' },
{ ID: 5, 이름: 'foo 5' },
]);
const fooSelected = ref<number[]>([]);
</스크립트>
<템플릿>
<AppList :items="fooItems" v-model:selected="fooSelected"></AppList>
<div>fooselected: {{ fooSelected }}</div>
</템플릿></pre>
</p>
<p>组件/Applist.vue：</p>
<p>
<pre class="brush:html;toolbar:false;"><스크립트 설정 lang="ts">
'vue'에서 { 계산, toRef } 가져오기;
내보내기 인터페이스 항목 {
ID 번호;
이름: 문자열;
}
const props = 정의Props<{
항목: 항목[];
선택됨?: 숫자[];
}>();
const InternalModel = toRef(props.selected ?? []);
const 방출 = 정의Emits<{
'업데이트:선택됨': [선택됨: 번호[]];
}>();
const selectedHandler = (e: 이벤트) => {
const target = <HTMLInputElement>e.target;
if(props.selected &&target) {
if (target.checked) {
Emit('update:selected', [...props.selected, Number(target.value)]);
} 또 다른 {
방출(
'업데이트:선택됨',
props.selected.filter((i: number) => i !== Number(target.value))
);
}
}
};
const 토글All = 계산됨({
가져오기: () => InternalModel.value.length === props.items.length && InternalModel.value.every((s) => props.items.map((item) => item.id).includes(s)),
설정: (값) => {
if (값) {
방출(
'업데이트:선택됨',
props.items.map((i) => i.id)
);
InternalModel.value = props.items.map((i) => i.id);
} 또 다른 {
Emit('업데이트:선택됨', []);
내부모델.값 = [];
}
},
});
</스크립트>
<템플릿>
<라벨>
<input type="checkbox" v-model="toggleAll" />
모두 전환
</라벨>
-
<li v-for="item in items" :key="item.id">
<라벨>
<input type="checkbox" :value="item.id" v-model="internalModel" @change="selectedHandler" />
<span>id {{ item.name }}</span>
</라벨>
</li>
</ul>
내부 모델: {{ 내부 모델 }}
</템플릿></pre>
</p>
