Код, работающий в watch, не работает в computed во vue?

Question

[Niksak]

Вот такие дела, код работает в watch, не работает в computed:((

<script>
//Импорт компонентов "по старинке"
import PostForm from "@/components/PostForm.vue";
import PostList from "@/components/PostList.vue";
import MyModal from "./components/UI/MyModal.vue";
import axios from "axios";
//По дефолту экспортируем всегда объект, который и является компонентом
  export default{
    components:{
    PostForm,
    PostList,
    MyModal
},
    data(){ //Здесь объявляем данные
      return{//Возвращаем нужные данные
        posts: [],
        modalVisible: false,
        isLoading: false,
        selectedSort: '',
        sortOptions:[
          {value:'title', name:'По названию'},
          {value:'body', name:'По описанию'}
        ],
        searchPost:''
      }
    },
    methods: {//Здесь методы, функции
      createPost(post){ //Этот метод вызывается из компонента дочернего
        this.posts.push(post);
        this.modalVisible = false;
      },
      removePost(post){
        this.posts = this.posts.filter(p => p.id !== post.id);
      },
      showModal(){
        this.modalVisible = true;
      },
      async fetchPosts(){
        try{
          this.isLoading = true;
          setTimeout(async () => {
            const response = await axios.get("https://jsonplaceholder.typicode.com/posts?_limit=10");
            this.posts = response.data;
            this.isLoading = false;
          }, 1000)
 
        }catch(err){
          alert("Ашыбка")
        }
      }
      // inputTitle(evt){
      //   this.title = evt.target.value;
      // },
      // inputBody(evt){
      //   this.body = evt.target.value;
      // },
    },
    mounted(){
      this.fetchPosts();
    },

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

    watch: {
      // selectedSort(newValue){
      //   this.posts.sort((post1, post2) => {
      //     return post1[newValue]?.localeCompare(post2[this.newValue]);
      //   })
      // },
      // searchedPosts(){
      //   return this.selectedSort.filter(post=> post.title.includes(this.searchPost));
      // }
    }
  }
</script>

Comments

[Niksak]

То есть, код должен сортировать массив:) Это из-за чего так вообще не вдупляю я глуппый

Answer 1

[Алексей Ярков]

return post1[newValue]?.localeCompare(post2[this.newValue]);

Всё так и задумано?

Comments

[Niksak]

Ну даа.. по крайней мере, оно работает в таком варианте))
Хотя, this нужно убрать, думаю, я просто ошибся

[Niksak]

Оно и так, и так работает

Answer 2

[alubochkin]

Может я что не внимательно смотрю но что в this.selectedSort лежит не пустая ли строка
computed:{
sortedPosts(){
return [...this.posts].sort((post1, post2) => {
return post1[this.selectedSort]?.localeCompare(post2[this.selectedSort]);
})
}
},

Comments

[Niksak]

Хер его, честно, я по видосу делал и там все так и все робит))

[Niksak]

Ну вообще, строка не пустая, она будет меняться при выборе опции из select и как я вижу в vue-dev, она правда меняется т.е. связывание двустороннее есть все же

[alubochkin]

ну возможно в момент срабатывания sortedPosts в computed => this.selectedSort пустой, законсоль это в методе.
Просто в watch ты как раз за этим полем и наблюдаешь поэтому и работает туда падает знаечение и он срабатывает