Как организовать вывод городов vuejs?

Question

[selfowl]

<input v-model="searchSring" type="text" class="sc_search_form" placeholder="Введите свой город">
<div class="elem_in_grid" v-for="i,index in perebor" v-if="i.city.length>0">
<div v-for="name in (i.city)">
{{name}}
</div>
</div>

data:{
cities: [{start: 0, end: 7, slug: 'а', city: ['абаза', 'Абакан', 'Абдулино', 'Абинск', 'Агидель', 'Агрыз', 'Адыгейск', 'Азнакаево', 'Азов', 'Ак-Довурак', 'Аксай', 'Алагир']}, {start: 0, end: 7, slug: 'б', city: ['Бабаево', 'Бабушкин', 'Бавлы', 'Багратионовск', 'Байкальск', 'Баймак', 'Бакал', 'Баксан', 'Балабаново', 'Балаково', 'Балахна', 'Балашиха', 'Балашов', 'Балей', 'Балтийск', 'Барабинск', 'Барнаул', 'Барыш', 'Батайск', 'Бахчисарай', 'Бежецк']}],
searchString =''
}
computed:{
        perebor(){
            var arr = [];
            let cities =  this.cities
            let searchSring = this.searchSring
            var prb = function (arr, find) {
                return arr.filter(function (value) {
                    return (value.toLowerCase() + "").indexOf(find.toLowerCase()) != -1;
                });
            };
           cities.forEach(element => {
                        element.city = prb(element.city, searchSring.toLowerCase())
                        if ((element.city).length>0){
                            arr.push(element)
                        }
                });
            return arr
        }
    },

Логика проста, человек вводит город в строку поиска город и из огромного списка городов ему отдаётся верный, всё работает до момента удаления символов, при удалении из строки computed свойство perebor - срабатывает, но перебирает, то что уже перебиралось, не могу понять ошибку

Answer 1

[Rsa97]

Поскольку cities объект, то присвоение let cities = this.cities просто копирует ссылку, а дальше вы изменяете исходные данные:

element.city = prb(element.city, searchSring.toLowerCase())

Answer 2

[Александр Маджугин]

Потому что ты изменяешь this.cities

Что такое element.city в строке element.city = prb(element.city, searchSring.toLowerCase())?
Это ссылка на this.cities[x].city - ты его перезаписал. Все, адью.

Сделай так:

cities.forEach(element => {
                        let newElement = JSON.parse(JSON.stringify(element))
                        newElement.city = prb(newElement.city, searchSring.toLowerCase())
                        if ((newElement.city).length>0){
                            arr.push(newElement)
                        }
                });

И что мешает хранить все города в едином списке, а не рзабитыми по буквам?

Comments

[0xD34F]

JSON.parse(JSON.stringify(element))

structuredClone(element)

[Александр Маджугин]

0xD34F, спасибо, не знал. Я так-то бэкендер.