Выбор основных и дополнительных параметров, нажав на изображения - PullRequest
Новая
       45

Выбор основных и дополнительных параметров, нажав на изображения

0 голосов
/ 24 января 2020

Моя цель - чтобы пользователь выбрал два объекта, которые будут размещены в основном и дополнительном точках. Подобно тому, как 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>

1 Ответ

0 голосов
/ 24 января 2020

Рассмотрите возможность добавления дополнительного параметра к каждой записи и используйте его для записи основного и дополнительного. 

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 (чтобы отменить выбор). 

methods: {
  toggle (option) {
    if (option.slot) { // turn it back off
      option.slot == null;
    } else {
      /* you'll want to pay closer attention to how you set 
         this in case they deactivate the primary after having
         set the secondary. This is just a quick and dirty way to 
         indicate primary vs secondary. */
      option.slot = this.slotsTaken()+1; 
    }
  }
}

Затем можно определить, оба слота были взяты с вычисленным свойством. 

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

Измените вещи в соответствии с вашими потребностями.

...