Vue.js는 동일한 컴포넌트 문제의 여러 인스턴스

Vue.js는 동일한 컴포넌트 문제의 여러 인스턴스

사진을 선택하기 위한 vue 컴포넌트를 만들었습니다.사용자가 사진을 클릭하면 해당 사진의 ID가 컴포넌트 내부의 숨겨진 입력 필드에 할당됩니다.

이 컴포넌트를 같은 페이지에서 다른 데이터로 두 번 사용했습니다.문제는 한 컴포넌트의 사진을 클릭하면 두 컴포넌트의 입력 필드 값이 갱신된다는 것입니다.vue.js 버전 2.1.10을 사용하고 있습니다.다음은 컴포넌트의 간이 버전입니다.

<div>
    <input type="hidden" :name="inputName" :value="currentSelectedPhoto.id">
    <div v-for="photo in photos">
        <div v-on:click="updateSelectedPhoto(photo)">
            <img :src="photo.photo_url" />
        </div>
    </div>
</div>

컴포넌트

export default {
    props: {
        ...
    },
    methods: {
        getPhotos(){
            ...
        },
        updateSelectedPhoto(photo){
            this.currentSelectedPhoto = photo;
        }
    }
}

html에서는 이렇게 사용하고 있습니다.

<div>
    <div>
        Profile Photo
        <photo-selector
            photos="{{ $photos }}"
            input-name="profile_photo_id"
            >
        </photo-selector>
    </div>
    <div class="col-sm-4">
        Cover Photo
        <photo-selector
            photos="{{ $otherPhotos }}"
            input-name="cover_photo_id"
            >
        </photo-selector>
    </div>
</div>

코드펜 샘플에 따르면 상태 오브젝트를 다음 두 가지 사이에 공유하기 때문입니다.

const initalState = {
  selectedPhoto: null
};

const PhotoSelector = Vue.extend({
  data: () => {
    return initalState
  },

Vue는 초기 상태 개체를 변환(반응형 getter 등으로 래핑함)하기 위해data()인스턴스에서 사용할 새 상태 개체를 반환합니다.

data: () => {
  return {
    selectedPhoto: null
  };
},

언급URL : https://stackoverflow.com/questions/43833036/vue-js-multiple-instances-of-same-component-issue