#javascript #vue.js
Вопрос:
В этом проекте у нас есть группа ноутбуков, у нас есть два варианта, сортировка по дате и сортировка по цене У меня проблема, когда я упорядочиваю устройства по дате, код работает правильно, но когда я активирую два варианта вместе, я получаю ошибку, код работает, но не так, как должен.
Видео, объясняющее проблему: https://drive.google.com/file/d/1Tbg-fp4d4LMM_Ds4X1uyZt5eOW0qvulx/view?usp=sharing
Приложение.vue:
<template>
<div id="app">
<app-header :changeSearch="changeSearch"/>
<div class="container">
<h1 class="pt-3 pb-3">Categories:</h1>
<!-- <pre>search : {{search}}</pre> -->
<!-- <pre>{{characters}}</pre> -->
<app-modal :character="characters[characterIndex]"/>
<spinner v-if = "loading"/>
<!-- <pre>{{characterIndex}}</pre> -->
<div v-else class="row">
<h5 v-if="!searchCharacters.length amp;amp;
!loading">
Ничего не найдено по запросу:
{{search}}</h5>
<div id="app">
<div class="btn-group">
<!-- Sort by Date -->
<button type="button" class="btn btn-light" v-on:click="sortByDate()">
<span v-if="oldestFirst">Oldest First</span>
<span v-else>Newest First</span>
</button>
<ul>
<li v-for="el in name" :key="el.id">{{el.modified}} </li>
</ul>
<ul>
<li v-for="el in newDates" :key="el.id">{{el.modified}}</li>
</ul>
<!-- Sort By Price -->
<button type="button"
class="btn btn-light"
v-on:click="sortByPrice()">
<span v-if="cheapestFirst">RUB MIN</span>
<span v-else>RUB MAX</span>
</button>
<ul>
<li v-for="el in name" :key="el.id">{{el.price}} </li>
</ul>
<ul>
<li v-for="el in newPrice" :key="el.id">{{el.price}}</li>
</ul>
</div>
</div>
<div v-for="(el, idx) in searchCharacters"
:key="el.id"
class="card mb-3 col-sm-12 col-md-6 col-lg-4">
<div class="row g-0">
<div class="col-4">
<img
:src="el.thumbnail"
style="max-width: 100%;">
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title">{{el.name}}</h5>
<button type="button"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
class="btn btn-secondary btn-sm"
@click="characterIndex = idx">
Click to see it
</button>
<h5>RUB {{el.price}}</h5>
<p class="date">Date First Available: {{el.modified}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Spinner from "./components/Spinner";
import AppModal from "./components/AppModal";
import AppHeader from "./components/AppHeader";
export default {
name: 'App',
components: {
AppHeader,
AppModal,
Spinner
},
data() {
return {
loading: false,
characters: [],
characterIndex: 0,
search: '',
oldestFirst: false,
cheapestFirst: true
}
},
methods: {
fetchCharacters: function() {
return fetch('https://api.jsonbin.io/b/61280bbd076a223676b1b0c5/4')
.then(res => res.json())
.then(json => this.characters = json)
},
changeSearch: function (value) {
this.search = value
},
sortByDate: function() {
this.oldestFirst = !this.oldestFirst;
},
sortByPrice: function() {
this.cheapestFirst = !this.cheapestFirst;
}
},
computed: {
searchCharacters: function() {
const {search, characters} = this;
return characters.filter((characters) => {
return characters.name.toLowerCase()
.indexOf(search.toLowerCase()) !== -1
})
},
newDates: function() {
var order = this.oldestFirst ? 1 : -1;
this.characters.sort(function(a, b) {
a = new Date(a.modified);
b = new Date(b.modified);
var results = a > b ? -1 : a < b ? 1 : 0;
return results * order
})
},
newPrice: function() {
var cheap = this.cheapestFirst ? 1 : -1;
this.characters.sort(function(a, b) {
var results = (a.price - b.price) > 0 ? -1 :
(a.price - b.price) < 0 ? 1 :0;
return results * cheap
})
}
},
async mounted() {
this.loading = true
await this.fetchCharacters()
this.loading = false
}
}
</script>
<style>
</style>
AppModal.vue:
<template>
<div v-if="character"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
class="modal fade"
style="display: none;" aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ character.name }}</h5>
<button type="button"
data-bs-dismiss="modal"
aria-label="Close"
class="btn-close"
></button>
</div>
<div class="modal-body">
<img :src="character.thumbnail"
:alt="character.name"
style="max-width: 100%;"
>
<div>
<p class="text-muted">Date First Available:
{{character.modified}}</p>
{{character.price}}
<h5>About this item</h5>
<p> {{ character.description }}</p>
<h5>More Details:</h5>
<ul>
<li v-for = "el in character.comics"
:key="el.id"> {{ el.name }}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button"
data-bs-dismiss="modal"
class="btn btn-secondary btn-sm"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AppModal",
props: ['character'],
}
</script>
<style scoped>
</style>
Комментарии:
1. Пожалуйста, укажите проблему. Из видео видно, что кнопка в списке открывает модальный режим, показывающий неправильный ноутбук? При очень беглом взгляде на код кажется, что нажатие кнопки первого элемента задает модальное отображение того, что является первым элементом в исходном списке, а не того, что является фактическим первым элементом.
2. Спасибо за ваш ответ)) да, в этом проблема, когда я активирую два варианта вместе и выбираю тип ноутбука, он показывает другой!
3. Просто мельком подумал, а как насчет:
<app-modal :character="searchCharacters[characterIndex]"/>4. Пожалуйста, отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией для определения адекватного ответа.