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

我已經創建了一個用於選擇照片的vue組件。當用戶點擊任何照片時，照片的ID將被分配給組件內的隱藏輸入字段。Vue.js同一組件問題的多個實例

現在我已經在同一頁面上使用了這個組件兩次不同的數據。問題是當我點擊一個組件的照片時，兩個組件的輸入字段的值被更新。我正在使用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>

來源

2017-05-07 Sajjad Ashraf

你可以做一個重複的例子？我在嘗試時看不到這種行爲（也是Vue 2.1.10）：https://codepen.io/anon/pen/aWVYpm – Matt

嗨@Matt我創建了一支筆https://codepen.io/sajjad26/筆/ qmVYLv –

根據您的codepen樣本，那是因爲你是共享兩者之間的狀態對象：

const initalState = { 
    selectedPhoto: null 
}; 

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

Vue公司變異初始狀態對象（通過它環繞在反應干將等），所以你需要有data()恢復新鮮狀態對象實例的使用方法：

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

來源

2017-05-07 18:50:10 Matt

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

回答

相關問題