Computed 메서드 예제

 

 

<template>

  <h1>Hello world</h1>

  <hr/>

  <h2>{{ title }}</h2>

  <ul>

    <li v-for="product in products" :key="product.id">

      <a href='#' @click="linkClicked(product.title)">

        {{product.title}} : {{ product.price }}

      </a>

    </li>

    <div>

      재고총가격 {{calcTotalPrice}}

    </div>

  </ul>

  <button @click="buttonClicked">상품추가</button>

</template>

<script>

export default {

  name: 'App',

  computed: {

    calcTotalPrice() {

      let totalStockPrice = 0;

      this.products.forEach(function (product) {

        totalStockPrice += product.price * product.stock;

      })

      return totalStockPrice;

    }

  },

  // beforeCreate() {

  //   alert('before create');

  // },

  // created(){

  //   alert('created');

  // },

  // beforeMount() {

  //   alert('beforeMountd')

  // },

  // mounted() {

  //   alert('mounted');

  // },

  methods: {

    buttonClicked() {

      console.log('button clicked...');

    },

    linkClicked(prod) {

      console.log(`${prod} 이 선택되었습니다.`);

    }

  },

  data() {

    return {

      title: '상품목록',

      products: [

        {

          id: 1,

          title: '아이폰',

          price: 35000,

          stock:  5,

        },

        {

          id: 2,

          title: '갤럭시',

          price: 45000,

          stock:  4,

        },

        {

          id: 3,

          title: '아이패드',

          price: 55000,

          stock:  2,

        },

        {

          id: 4,

          title: '맥북프로 M2',

          price: 85000,

          stock:  0,

        },

      ],

    }

  },

  components: {

   

  }

}

</script>

<style>

</style>