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同一组件问题的多个实例

回答

相关问题