Vue.js相同組件問題的多個實例

Question

我已經創建了一個用於選擇照片的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>

Answer 1

基於您的codepen示例，這是因為您在兩者之間共享狀態對象：

const initalState = {
  selectedPhoto: null
};

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

Vue會改變初始狀態對象（通過將其包裝在反應性getter等中），因此您需要讓data()返回一個新的狀態對象供實例使用：

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