Как сделать сортировку по id на Javascript?

Question

[Alex931]

Здравствуйте. Есть такой код

computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort]))
},
}

и такой
((post1, post2) => post1.id - post2.id)
Хочу добавить сортировку по id. Не пойму, почему не работает код. Делаю вот так.

computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort])?.(post1, post2) => post1.id - post2.id)
}
}

И так тоже пробовал

computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort]):post1.id - post2.id)
}
}

Подскажите, что делаю не так?

Comments

[Rsa97]

Подскажите, что делаю не так?

Пытаетесь писать код не изучив язык.

[Alex931]

Rsa97, я недавно пишу на js. Просто не совсем понимаю, в чем здесь ошибка. Это тернарный оператор? Тогда его синтаксис
условие ? выражение1 : выражение2
Или здесь другое?

[Антон Горецкий]

Немного нужно изучить вопрос - sort и написать правильно самому.

[GrayHorse]

тернарный оператор

Его здесь нет.

[Alex931]

Антон Горецкий, изучил вопрос. Попробовал сделать сам. Получилось

computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort])?.(post1.id - post2.id[this.selectedSort]))
},

И все равно не работает сортировка.

[Антон Горецкий]

Alex931, нет не изучили, иначе перестали бы писать эту дичь. Ф-я sort принимает пару аргументов post1 и post2 - для каждой пары она должна вернуть одно из следующих значений 1, 0, -1 . Приведите пример как выглядят ваши объекты(prop1 и prop2), чтобы вам подсказали как их правильно сравнить. Потому, что по тем манипуляциям что вы делаете - совершенно не понятна их структура и по какому свойству сравнивать.

[Alex931]

Антон Горецкий, чтобы было наглядно, скинул все содержимое файла. Здесь список постов.

<template>
    <div>
        <h1>Новости</h1>
        <my-input
        v-model="searchQuery"
        placeholder="Найти..."
        />
        <div class="app__btns">
        <my-button class="button"
        @click="showDialog">
            Добавить новость
        </my-button>
        <my-select
        v-model="selectedSort"
        :options="sortOptions"
        />
        </div>
        <my-dialog
        v-model:show="dialogVisible">
           <post-form
@create="createPost"
/>
        </my-dialog>
<post-list
:posts="sortedAndSearchedPost"
@remove="removePost"
/>
    </div>
</template>

<script>
import PostForm from "@/components/PostForm.vue"
import PostList from "@/components/PostList.vue"
import MyDialog from "@/components/UI/MyDialog.vue";
import MyButton from "@/components/UI/MyButton.vue";
import MySelect from "@/components/UI/MySelect.vue";
export default {
components: {
    PostList,
    PostForm,
    MyDialog,
    MyButton,
    MySelect
},
data() {
    return {
        posts: [
            {id: 1, title: 'Javascript', body: 'Описание поста'},
            {id: 2, title: 'Javascript 2', body: 'Описание поста 2'},
            {id: 3, title: 'Javascript 3', body: 'Описание поста 3'},
            {id: 4, title: 'Javascript 4', body: 'Описание поста 4'},
        ],
       
dialogVisible: false,
selectedSort: '',
searchQuery: '',
sortOptions: [
    {value: 'title', name: 'по названию'},
    {value: 'body', name: 'по тексту'},
    {value: 'id', name: 'по дате'},
]
    }
}, methods: {
    createPost(post) {
        this.posts.push(post);
        this.dialogVisible = false;
    }, 
removePost(post) {
    this.posts = this.posts.filter(p => p.id !== post.id)
},
showDialog() {
    this.dialogVisible = true;
}
}, 
computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort])?.(post1.id - post2.id[this.selectedSort]))
}, 
sortedAndSearchedPost() {
    return this.sortedPosts.filter(post => post.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
}
}
}
</script>

<style>

</style>

Вот так сортировка работает, только не сортирует по id.

computed: {
    sortedPosts() {
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort]))
},

[Антон Горецкий]

Исходя из вашего кода - вам ничего не нужно делать с первоначальной функцией - она и так может сортировать по любому полю. Если вы хотите сортировку по id, то нужно в переменную в вашем файле
selectedSort - записать строку 'id':
selectedSort = 'id' ;
если хотите сортировку по title то selectedSort = 'title'; если по body то selectedSort = 'body'; Это нужно делать по выбору пользователя.
Если хотите чтобы сортировка всегда была по id, то можно так:

computed: {
    sortedPosts() {
this.selectedSort = 'id';
        return [...this.posts].sort((post1, post2) => post1[this.selectedSort]?.localeCompare(post2[this.selectedSort]))
},
}

[Alex931]

А как это сделать в моем коде? У меня selectedSort: "" - пустая строка.

selectedSort = 'title' ,
selectedSort = 'body' ,
selectedSort = 'id' ,

Вот так? Я что-то не пойму.

[Антон Горецкий]

Можете вместо пустой строки подставить id, изначально. Суть в том, что пользователь дальше сам может выбирать вид сортировки. Он нажимает на кнопку, на которую вешается событие клика - вызывается ф-я меняющая значение selectedSort на одно из выбранных значений id, body, titile и вызывается перерисовка. Я просто во vue не очень ориентируюсь, поэтому точный код этого процесса не напишу вам, но суть описал. У вас там компонент <my-select должен за выбор отвечать, он же и должен менять переменную selectedSort