gpt4 book ai didi

javascript - Vue.js 同一组件问题的多个实例

转载 作者:搜寻专家 更新时间:2023-10-30 22:30:24 25 4
gpt4 key购买 nike

我创建了一个用于选择照片的 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>

最佳答案

基于您的 codepen示例,这是因为您在两者之间共享状态对象:

const initalState = {
selectedPhoto: null
};

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

Vue 改变初始状态对象(通过将其包装在响应式 getter 等中),因此您需要让 data() 为实例返回一个新的状态对象使用:

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

关于javascript - Vue.js 同一组件问题的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43833036/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com