Урок 5. Фреймворк VUE JS. Фильтрация и окно покупки 

Vue.js скоро убьёт jQuery! Vue.js one love!

@@FoketzoRAi 2 года прошло, а всет не убил)

selectCar: function (index) { this.selectedCarIndex = index this.car = this.filtredCars[index] }

Нашли решение проблемы? Если да, то подскажите пожалуйста

@@maksimvorontsow417 10:20 Добавь :key="index" для li export default { name: 'app', data: ()=>({ cars, logs: [], selectedCarIndex: 0, show: false, search: '', modalVisibility: false }), methods: { selectCar(idx){ this.car = this.filteredCars[idx] this.selectedCarIndex = idx }, updateSelectedCar(){ const res = this.filteredCars.filter((el)=>Object.is(el, this.car)) if(!res.length){ this.car = this.filteredCars[0] this.selectedCarIndex = 0 } for(const[idx, el] of this.filteredCars.entries()){ if(Object.is(el, this.car)){ this.selectedCarIndex = idx } } }, newOrder(){ this.modalVisibility = false this.logs.push( log(`Success order: ${this.car.name} - ${this.car.model}`, 'ok') ) }, cancelOrder(){ this.modalVisibility = false this.logs.push( log(`Canceled order: ${this.car.name} - ${this.car.model}`, 'cnl') ) } }, computed: { phoneBtnText(){ return this.show ? 'Hide Phone' : 'Show Phone' }, filteredCars(){ const filtered = this.cars.filter((car)=>{ return car.name.indexOf(this.search) > -1 || car.model.indexOf(this.search) > -1 }) return filtered }, car: { get: function(){ return this.filteredCars[this.selectedCarIndex] // поставь v-if="car" на инфу по машине, если машин не найдено }, set: function(val){ return val } } }, components: {} }

@@maksimvorontsow417Тогда мне такое было не под силу)) Не работает сохранение выбранной машины, но переписывать уже не буду. selectedCarIndex --- это бред. Нужен ID или то что его заменит. Так как индекс одной и той же машины меняется в зависимости от filteredCars и отследить его там и переназначить это уже дичь. Будут вопросы - пиши

Изменилась версия bootstrap5 см. ошибки в консоли. Меняешь ссылки на бустрап и заново копируешь пример обновлённого модального окна. все заработает.

и ещё. если ты подключил стили бустрап после своего файла css , то он будет затирать все твои команды. т.е. свой файл подключаешь после бутстрапа и тогда display block работает уже из твоего файла.

@DJ MIAMI ахахахах уже сделала)

Это миникурс, где показываются основы. Полную информацию о том, как работать с базой данных firebase можно найти в полном курсе

а vue вообще работает в связке с php и mysql? так как есть своя небольшая mvc на php и mysql, хотелось бы туда применить vue если это технически возможно

Да, безусловно. Такие возможности в курсе рассматриваются - использование REST API По сути тоже самое, что делать простые ajax запросы

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

В полном курсе рассматриваем) В скором времени на этом канале будет хороший туториал как сделать большое приложение целиком, только в качестве бекенда там будет nodejs, но суть будет такая для любого языка - Java, c, php ...

при клике на элемент списка phoneVisibility менять на false

Например, так v-on:click="selectCar(index); phoneVisibility = false"

@@mooderatorpro спасибо

можно использовать toLowerCase( ) filteredUsers() { return this.dataAppUsers.filter( user => { return user.name.toLowerCase( ).indexOf( this.search.toLowerCase( ) ) > -1 }) }

@@user-vc7mr8nv7z у меня не сработало, я оставил один toLowerCase() и все заработало. Кому надо вот код: filteredCars() { return this.cars.filter(car => { return car.name.toLowerCase().indexOf(this.search) > -1 || car.model.toLowerCase().indexOf(this.search) > -1 }) }

Проверить, если computed свойства отдают пустой массив, то обнулить актуальную машину и индекс

в filterCars(), можете описать подробнее?

Замените index.html: v-on:click:"selectCar(car, index)" app.js: selectCar(car, index){ this.car = car; this.selectedCarIndex = index; }

Спасибо большое, а можно еще вопрос по vue. Подскажите как вывести график истории изменения криптовалюты по api coincap.io/history/7day/ETC . Вообще из любого api построить график на основе Chart.js

Простите, но это очень специфичные требования. Лично я не знаком с vue.js и Chart.js. Предыдущий ответ я Вам дал на основе логики скрипта, не принимая во внимание специфику фреймворка vue.js. Если вы действительно хотите подойти к решению Вашей задачи серьезно, советую сделать акцент на изучение чистого JavaScript. Конкретно, если Вам необходимо одноразово решить поставленную задачу, начните с AJAX запросов со своей страницы на целевую для получения информации. Ссылка выдает данные в формате JSON, что очень удобно для обработки. Выведите на Вашей странице полученные данные простым текстом. Когда у Вас это получится - поищите в документации Vue.js запросы на сервер. Есть один важный момент. Судя по задаче и тому, что Вы ищете решение под таким роликом, Вы хотите пользоваться двухсторонней подвязкой Vue.js (данныеэлемент) вместе с графической библиотекой Chart.js. На вскидку, это кажется сложней, чем пользоваться только одним из интсрументов для получения и вывода таких данных. Важно помнить: иногда для решения простых задач нужен простой подход. Использование технологий ради технологий приводит к ошибкам и уводит Вас от решения Вашей задачи к решению совместимостей, комплексной архитектуры и т.д.