Heestory

Vue 정리2 본문

카테고리 없음

Vue 정리2

까만밀가루 2022. 8. 5. 20:29
국비 day2
1.watch
2.미니 장바구니 :select에서 항목 + 수량 입력 하면 총 구매액이 자동 계산된다.
+ajax, component

 

test01 : watch - 실시간 변경됨을 인지

 

data의 실시간/빈번한 update가 필요한것은 watch,  한번 렌더링 되었을때만 update되면 되는것은 computed
computed와 watch 둘다 가능 한 것은 computed(Vue 문서 참고)

 

<body>
  <div id="app">
    이름 <input type="text" v-model="name"><br>
    나이 <input type="number" min="0" step="1" v-model.number="age"><br>
    <button @click="addinfo">등록</button>
    {{msg}}
    <ul>
      <li v-for="(mem,index) in list" :key="index">
        {{mem.name}}:{{mem.age}}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        name: "",
        age: "",
        list: [
          { name: '홍길동', age: '10' },
          { name: '이길동', age: '20' }
        ],
        msg: ""
      },
      methods: {
        addinfo() {
          this.list.push({
            name: this.name,
            age: this.age
          });
        }
      },
      watch: {  //data변수값이 변경됨을 감시
        age: function (newVal, oldVal) {
          console.log("나이가 " + oldVal + " 에서 " + newVal + " 로 변경되었음");
          if (newVal >= 200) {
            this.msg = "200 이상의 값은 넣을 수 없어요";
          } else if (newVal < 0) {
            this.msg = "0 미만의 값은 넣을 수 없어요";
          } else {
            this.msg = "";
          }
        },
        list: function (newVal) {
          console.log("변경된 정보");
          newVal.forEach(function (val) {
            console.log(val.name + "," + val.age);
          });
        }
      }

    })
  </script>
</body>

 

 

test02:select에서 항목 + 수량 입력 하면 총 구매액이 자동 계산된다.

예시

실시간 변화 -> watch 이용 

외국 결제 사이트에서 장바구니 담으면 옆에서 바로 계산되는 프로그램 짤 때 유용할 듯!

 

①ref를 이용한 경우

-mounted를 이용하여 select 0번째 요소 결정

-method : ref를 이용해 n번째 selectedindex를 item으로 정의

   → slist의 새로운 배열에 item의 상품명, 가격과 새로 입력받은 수량 담기

-watch : 실시간 수량 변화 감지

  새로운 배열의 slist의 마지막 배열번호(배열이 0번째부터 시작하기 때문에) 의 것을 새로운 item이라 정의

→item의 가격과 수량을 누적 계산하여 총 구매액을 구한다.

 

<body>
  <div id="app">
    <select ref="s">
      <option v-for="(item,index) in items" :key="index">{{item.name}}</option>
    </select>
    <input type="number" v-model="n" min="0" max="100"><br>
    <button @click="addItem">담기</button>
    <div>
      <ul>
        <li v-for="(i,index) in sitems" :key="index">상품:{{i.name}},가격:{{i.price}},수량:{{i.cnt}}</li>
      </ul>
    </div>
    <p>총구매액:{{t}}</p>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        items: [{ name: "사과", price: 1000 }, { name: "포도", price: 2000 }, { name: "수박", price: 3000 }, { name: "바나나", price: 5000 }],
        sitems: [],
        n: 0,//수량
        t: 0 //총구매액
      },

      mounted: function () {
        this.$refs.s.selectedIndex = 0;
      },
      methods: {
        addItem: function () {
          const item = this.items[this.$refs.s.selectedIndex];
          this.sitems.push({ name: item.name, price: item.price, cnt: this.n })
        }
      },
      watch: {
        sitems: function (val) {    /* watch의 경우 function(newVal) , newVal = val*/
          const item = val[val.length - 1];
          this.t += item.price * item.cnt;
        }
      }
    })
  </script>
</body>

 

②forEach 이용

-methods : items의 for문을 돌려 item의 name과 선택된 것과 같을 때 새로운 배열의 sitems에 담는다.

(이때 for문을 돌리지 않으면 어떤 것이 선택된지 몰라 결과에 빈칸으로 나올 것, selected 구문에선 for문!!)

-watch : 새로운 newVal의 forEach를 돌려 가격과 수량 곱의 누적 합을 구한다.

<body>
  <div id="app">
    <select v-model="selected">
      <option v-for="(l, index) in items" :key="index">
        {{l.name}}
      </option>
    </select>
    <input type="text" v-model.number="cnt" />
    <button @click="addItem">담기</button>
    <ul>
      <li v-for="(t, index) in sitems" :key="index">
        상품:{{t.name}}, 가격:{{t.price}}, 수량:{{t.cnt}}
      </li>
    </ul>
    총 구매액 : {{t}}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        cnt: 0,
        selected: '',
        items: [
          { name: "사과", price: 1000 },
          { name: "포도", price: 2000 },
          { name: "수박", price: 3000 },
          { name: "바나나", price: 5000 }
        ],
        sitems: [],
        t: 0
      },
      methods: {
        addItem() {
          this.items.forEach(e => {
            if (e.name == this.selected) {
              this.sitems.push({ 'name': e.name, 'price': e.price, 'cnt': this.cnt });
              return;
            }
          });
        }
      },
      watch: {
        sitems(newVal) {
          this.t = 0;
          newVal.forEach(e => {
            console.log(e.name + ", " + e.price + ", " + e.cnt);
            this.t += e.price * e.cnt;
          }, this);
        }
      }
    })
  </script>
</body>