CROMESS
42
2018-12-19 10:08:49 작성 2018-12-19 10:12:23 수정됨
1
322

Vue js의 동작 구조에 대해 여쭤보고자 합니다.


우선 저는 아래와 같은 방식으로 컴포넌트를 등록했습니다.


        Vue.component('rating-item', {
             template: '\
                <li class="list-group-item d-flex justify-content-between align-items-center">\
                    {{title}}<span class="badge" v-on:click="$emit(\'remove\')"><i style="font-size:15px;color:orange;" class="fas fa-minus-square"></i></span>\
                </li>\
            ',
            props: ['title'] 
        })


그리고 등록한 컴포넌트를 rating-list-component 라는 id를 가진 div 안에서 사용하였습니다.


rating-list-component에 바인딩된 Vue 컴포넌트는 아래와 같습니다.


        new Vue({
            el: '#rating-list-component',
            data: {
                newRatingItem: '',
                rating_items: [
                    {
                        title: '평론가'
                    },
                    {
                        title: '관객'
                    }
                ]
            },
            methods: {
                addNewRatingItem: function () {
                    if(this.rating_items.length > 8){
                        alert('최대 입력 항목은 9개입니다.');
                        return;
                    }
                    if(this.newRatingItem == ''){
                        alert('값을 입력해주세요!');
                        return;
                    }
                    if(this.newRatingItem.length > 20){
                        alert('20자 이하만 입력 가능합니다.');
                        return;
                    }
                    this.rating_items.push({
                        title: this.newRatingItem
                    })
                    this.newRatingItem = ''
                },
                
                saveRatingItems: function(){
                    if(this.rating_items.length < 1){
                        alert('최소 하나의 평가 항목이 들어가야합니다!');
                        return;
                    }
                    for(var count in this.rating_items){
                        with(this.rating_items[count]){
                            //여기에 변수를 저장하는 파트를 만들어야합니다.
                            console.log(title);
                        }
                    }
                }
            }
        })
        


Body 내에서 해당 부분들의 html은 아래와 같습니다.


                <div id="rating-list-component">
                    <img src="poster.jpg" width="100%">
                    <input type="text" v-model="newRatingItem" v-on:keyup.enter="addNewRatingItem" placeholder="Rating 항목 입력">
                    <ul class="list-group" width="100%">
                        <li
                            is="rating-item"
                            v-for="(rating, index) in rating_items"
                            v-bind:title="rating.title"
                            v-on:remove="rating_items.splice(index, 1);"
                        ></li>
                    </ul>
                    <button class="btn btn-lg btn-primary btn-block" v-on:click="saveRatingItems">Start</button>
                </div>
                


여기서 다음 과정을 진행하던 중 문제가 발생했습니다.


new Vue를 이용하는 바인딩을 통해 최상위 컴포넌트인 <div id="app">을 바인딩.


해당 바인딩을 상기 스크립트의 위에서 선언하면 Vue를 통한 랜더링 자체가 이루어지지 않고 아래쪽에서 선언하면 랜더링은 되나 Vue를 통한 동작이 전혀 되지 않습니다.


오류에선 new Vue로 바인딩하며 정의한 Property 또는 메소드들이 존재하지 않는다고 출력됩니다.


상기한 방식의 구조는 Vue에서 권장되지 않는건가요?


아니라면 무언가 다른 방식을 통해서 접근해야하는건가요?

0
0
  • 답변 1

  • yeori
    534
    2018-12-20 01:55:42

    `rating-item` 이라는 전역 컴포넌트를 선언했기 때문에 body에 삽입되는 html 에서는 `LI` 대신 rating-item을 사용하셔야겠네요

          <ul class="list-group" width="100%">
            <rating-item 
                 v-for="(rating, index) in rating_items"
                 v-bind:title="rating.title"
                 v-on:remove="deleteItemAt(index)"/>
          </ul>

    https://codepen.io/yeori/pen/EGNMKj


    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.