저는 일주일 넘게 이 문제를 해결하려고 노력했지만, 결국 도움을 요청하지 않을 수 없게 되었습니다.
Vue 2에서 Vuetify를 사용하여 검색 필터를 구현하고 있는데 뭔가 문제가 있습니다.
검색 필터는 다음과 같습니다.
<v-text-field v-model="search" label="Look for name..."></v-text-field> 텍스트 필드 v-model과 이중 바인딩된 구성 요소 데이터에 검색이라는 변수가 있습니다.
둘째, 다음과 같은 항목이 있습니다.
items: [
{
default: true,
name: 'Text 1',
},
{
default: false,
name: 'Text 2',
},
{
default: false,
name: 'Text 3',
},
{
default: false,
name: 'Text 4',
}, ], v-for를 사용하여 목록을 div로 렌더링합니다.
<div v-for="(item, index) in filteredItems">
<div style="display: flex">
<input
type="radio"
:checked="item.default"
@click="changeDefault(item, index)"
/>
<h1>{{ item.name }}</h1>
</div>
</div> 컴포넌트는 다음과 같습니다.리스트 및 검색 필터가 렌더링됩니다.
필터는 어떻게 작동하나요?여기 코드가 있습니다.
filteredItems() {
if (this.search) {
return this.items.filter((item) => {
return item.name.toLowerCase().match(this.search);
});
} else {
return this.items;
} }, 렌더링된 목록에서 볼 수 있듯이 항목에는 선택할 수 있는 라디오 버튼이 있습니다.이 중 몇 개를 클릭하면 changeDefault라는 함수를 호출합니다.이 함수의 코드는 이것입니다(기본 true 항목을 가져와 false로 설정하고 새로운 항목을 true로 설정하기만 하면 됩니다.
changeDefault(item, index) {
let indexOfDefaultTrue = this.items.findIndex((item) => item.default === true);
this.items[indexOfDefaultTrue].default = false;
this.items[index].default = true; }, 모두 정상적으로 동작하고 있는 것 같습니다만, Text 2(예를 들면)를 검색해, 라디오 버튼을 클릭하면 액티브하게 되어 버립니다만, 필터를 클리어 하면 아무 일도 일어나지 않는 것 같습니다.검색 방법을 사용하고 있는 경우, 초기 리스트의 항목을 클릭하면, 라디오 버튼이 올바르게 바뀝니다.텍스트 2 검색 클리어 후
리스트에 새로운 아이템이나 그런 것이 렌더링되지 않은 것 같습니까?난 너무 막혔어.정말 고마워요, 누가 좀 도와줬으면 좋겠어요!
<template>
<v-app>
<v-main>
<v-text-field v-model="search" label="Look for name..."></v-text-field>
<div v-for="(item, index) in filteredItems">
<div style="display: flex">
<input
type="radio"
:checked="item.default"
@click="changeDefault(item, index)"
/>
<h1>{{ item.name }}</h1>
</div>
</div>
</v-main>
</v-app> </template>
<script> export default {
name: 'App',
components: {},
data: () => ({
search: '',
items: [
{
default: true,
name: 'Text 1',
},
{
default: false,
name: 'Text 2',
},
{
default: false,
name: 'Text 3',
},
{
default: false,
name: 'Text 4',
},
],
}),
methods: {
changeDefault(item, index) {
console.log(item);
let indexOfDefaultTrue = this.items.findIndex((item) => item.default === true);
console.log(indexOfDefaultTrue);
this.items[indexOfDefaultTrue].default = false;
this.items[index].default = true;
console.log(this.items);
},
},
computed: {
filteredItems() {
if (this.search) {
return this.items.filter((item) => {
return item.name.toLowerCase().match(this.search);
});
} else {
return this.items;
}
},
}, }; </script>