Javascript 通过单击图像选择主选项和次选项

我的目标是让用户选择两个对象，放置在主要点和次要点。类似于FB和Instagram处理为帖子选择图像的方式。理想情况下，他们只需点击/点击其中一个，然后点击两个，然后再点击/点击一个，就可以取消选择一个

<template>
    <div>
        <h3>Pick your two favorite dogs!</h3>
        <div v-for="dog in options" :key="dog.id">
            <a @click="selectFirstThenSecond(dog)" :style="{ isSelected }">
                <img :src="dog.img">
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                primaryChoice: '',
                secondaryChoice: '',
                options: [
                    {
                        id: 1,
                        name: 'Chihuahua',
                        size: 'Small',
                        img: 'chi.jpg'
                    },
                    {
                        id: 2,
                        name: 'Yorkshire Terrior',
                        size: 'Small',
                        img: 'yorkie.jpg'
                    },
                    {
                        id: 3,
                        name: 'Mastiff',
                        size: 'Large',
                        img: 'mastiff.jpg'
                    },
                    {
                        id: 4,
                        name: 'Brittany Spaniel',
                        size: 'Medium',
                        img: 'brit.jpg'
                    }
                ]
            }
        },
        methods: {
            selectFirstThenSecond(dog) {
                ???
            }
        }      
    }
</script>

挑选你最喜欢的两只狗！
导出默认值{
数据（）{
返回{
primaryChoice:“”，
第二选择：''，
选项：[
{
id:1，
名称：'吉娃娃'，
尺寸：'小'，
img:‘chi.jpg’
},
{
id:2，
名称：“约克郡猎犬”，
尺寸：'小'，
img:'yorkie.jpg'
},
{
id:3，
姓名：'獒'，
尺寸：'大'，
img:'mastiff.jpg'
},
{
id:4，
名字：“布列塔尼猎犬”，
尺寸：'中等'，
img:'brit.jpg'
}
]
}
},
方法：{
选择第一个，然后选择第二个（狗）{
???
}
}      
}

考虑在每个条目中添加一个附加参数，并使用该参数记录主要和次要参数

options: [
  {
    id: 1,
    name: 'Chihuahua',
    size: 'Small',
    img: 'chi.jpg',
    slot: null
  },
  {
    id: 2,
    name: 'Yorkshire Terrior',
    size: 'Small',
    img: 'yorkie.jpg',
    slot: null
  },
  {
    id: 3,
    name: 'Mastiff',
    size: 'Large',
    img: 'mastiff.jpg',
    slot: null
  },
  {
    id: 4,
    name: 'Brittany Spaniel',
    size: 'Medium',
    img: 'brit.jpg',
    slot: null
  }
]

然后，当您单击每个选项时，您的方法可以填充该新参数或将其设置回null（以取消选择）

然后，您可以确定是否已使用计算属性获取两个插槽

computed: {
  slotsTaken () {
    return this.options.filter(option => slot != null).length;
  }
}

---

修改内容以满足您的需要。

谢谢！这是有道理的，除此之外的唯一问题是，一旦选择了这些选项，如何访问它们。ie将它们存储为ajax请求的“primaryChoice”和“secondaryChoice”。另外，如何将用户选择限制为只有两个，您可以在

toggle

函数中定义所有这些。也就是说，如果将某个选项设置为活动，则可以同时更新

primaryChoice

参数。你的限制也是一样-你可以检查

slotsaked（）

值是否等于你的最大值（2），或者停止操作，或者弹出消息，等等。

computed: {
  slotsTaken () {
    return this.options.filter(option => slot != null).length;
  }
}