Vue.js 동일한 구성 요소 문제의 여러 인스턴스

Question

사진을 선택하는 데 vue 구성 요소를 만들었습니다. 사용자가 사진을 클릭하면 사진의 ID가 구성 요소 안의 숨겨진 입력 필드에 지정됩니다.

이제이 구성 요소를 동일한 페이지에서 다른 데이터로 두 번 사용했습니다. 문제는 한 구성 요소의 사진을 클릭하면 두 구성 요소의 입력 필드 값이 업데이트됩니다. vue.js 버전을 사용하고 있습니다. 2.1.10 다음은 구성 요소의 단순화 된 버전입니다. 나는 HTML에서 사용하고 방법

<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; 
     } 
    } 
} 

이것은 당신이 둘 사이의 상태 개체를 공유하고 있기 때문에

당신의 codepen 샘플을 기반으로

<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> 

Answer 1

, 그것의이다 :

const initalState = { 
    selectedPhoto: null 
}; 

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

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