Как изменить путь к фотографии, на которой я щелкнул, event.target? - PullRequest
Новая
       19

Как изменить путь к фотографии, на которой я щелкнул, event.target?

1 голос
/ 12 февраля 2020

Я новичок в Vue, поэтому не судите) 

<Template>
    <div>
        <img :src="imgPath" @click="changePath(imgPath)">
        <img :src="imgPath" @click="changePath(imgPath)">
        <img :src="imgPath" @click="changePath(imgPath)">
    </div>
</Template>

<script>
export default {
    data: () => ({
        imgPath: require('../assets/img/photo_1.png'),
        imgPath1: require('../assets/img/photo_1.png'),
        imgPath2: require('../assets/img/photo_2.png'),
    }),

    methods: {
        changeAnswerImgN(imgPath) {
            if (imgPath == this.imgPath1) {
                this.imgPath = this.imgPath2;

            } else if (imgPath == this.imgPath2) {
                this.imgPath = this.imgPath1;
            }
        },
    },

    mounetd() {
        this.imgPath = this.imgPath1;
    },
}
</script>

Проблема в том, что когда я нажимаю на любую из фотографий, они изменяют путь вместе, но я только хочу изменить путь к фотографии, на которую я нажал.

Я пытался использовать event.target & $emit, но ничего не произошло (

1 Ответ

1 голос
/ 12 февраля 2020

Звучит как идеальное использование с массивом, поскольку теперь вы переключаете только одно значение imgPath, которое, конечно, при нажатии на одно изображение, все меняется. Итак, рассмотрим массив, который вы повторяете в шаблоне, и по щелчку измените только значение источника этого изображения: 

data: () => ({
  imgPath1: require('../assets/img/photo_1.png'),
  imgPath2: require('../assets/img/photo_2.png'),
  // iterate this in template
  imgs: []
}),
methods: {
  changePath(img, index) {
    // toggle between the two images
    let newPath = img === this.path1 ? this.path2 : this.path1;
    // needed for change detection
    this.$set(this.imgs, index, newPath);
  }
},
mounted() {
  // you want all images to initially be the first
  this.imgs = Array(3).fill(this.imgPath1);
}

и шаблон: 

<template v-for="(img, i) in imgs">
  <img :src="img" :key="i" @click="changePath(img, i)">
</template>

SANDBOX

...