[vuejs] 게시물 or 데이터 정렬버튼 만들기

1. 가지고 오는 데이터의 형태 확인

export default [{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000,
    fakeReport: 0
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000,
    fakeReport: 0
    },
    {
    id : 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000,
    fakeReport: 0
    },
    {
    id : 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000,
    fakeReport: 0
    },
    {
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000,
    fakeReport: 0
    },
    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000,
    fakeReport: 0
  }];

2. 정렬 함수 만들기

<script>

import data from './assets/oneroom.js'
import Discount from './components/Discount.vue'
import Modal from './components/Modal.vue'
import Card from './components/Card.vue'

export default {
  name: "App",
  data() {
    return {
      누른상품번호 : 0,
      모달창열림: false,
      모달창닫힘: true,
      products : data,
      products2 : [...data],
    };
  },
  components: {
    Discount,
    Modal,
    Card,

  },
  methods: {
    되돌리기(){
      this.products = [...this.products2]
    },  
    가격낮은순(){
      this.products.sort(function(a,b){
        return a.price - b.price
      })
    },
    가격높은순(){
      this.products.sort(function(a,b){
        return b.price - a.price
      })
    },
  
    increase(e) {
      this.products[e].fakeReport++;
    },
    모달창열기() {
      this.모달창열림 = true;
      this.모달창닫힘 = false;
    },
    모달창닫기() {
      this.모달창열림 = false;
      this.모달창닫힘 = true;
    }
  },
};
</script>

3. 버튼만들기

<template>

<transition name="fade">
  <Modal :누른상품번호="누른상품번호" :products="products"
   :모달창열림="모달창열림" @모달창닫기="모달창닫기()"/>
  </transition>

  <Discount/>

  <button @click="가격높은순">가격높은순</button>
  <button @click="가격낮은순">가격낮은순</button>
  <button @click="되돌리기">되돌리기</button>
  
  <Card v-for="(a,i) in products" :key="a" :products="products[i]"
    @모달창열기="모달창열기(); 누른상품번호=$event" 
    @increase="increase(i)"  />
  

</template>

4. 출력창