vue.js MockData 사용법

src에 data 폴더를 만들고 data명.js 파일을 만든다

그리고 그 데이터를 사용할 vue 파일에서 import를 다음과 같이 해주자

import { 데이터명 } from '@/data/ data명 ';

 

그 후 

data(){
    return {

       데이터명: {},

     };

}

이렇게 만들어두고
created 훅을 이용해 다음과 같이 작성해주자

created() {

        this.데이터명 = 데이터명 ;

}

 

그리고 <p>데이터명.어트리뷰트이름</p> 이런 형태로 사용하면 된다.

 

참고로 MockData의 예시이다.

export const mockRestaurantData = [

    {

      restaurantName: "프프",

      restaurantLocation: "한동대",

      restaurantType: "양식",

      restaurantTelephone: "054-123-1234",

      restaurantDayOff: "금",

      restaurantPhoto: "alalal.com",

      restaurantRooms: "YES",

      restaurantToilet: "NO",

      restaurantSmoking: "YES",

      restaurantParking: "YES",

      availableDate: [

        "2024-06-01",

        "2024-06-02",

        "2024-06-03",

        "2024-06-04",

        "2024-06-05",

        "2024-06-06",

        "2024-06-07",

        "2024-06-08",

        "2024-06-09",

        "2024-06-10",

        "2024-06-11",

        "2024-06-12",

        "2024-06-15",

        "2024-06-16",

        "2024-06-17",

        "2024-06-19",

        "2024-06-20",

        "2024-06-21",

        "2024-06-24",

        "2024-06-25",

        "2024-06-26",

        "2024-06-27",

        "2024-06-30"

      ]

    },

 

그러니 만약 이 mockdata를 사용할거라면

mockRestaurantData . restaurantName

이렇게 사용하면 된다.