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

Vue.js相同组件问题的多个实例

1 个答案: