Я новичок в vuejs и все еще учусь. У меня есть 4 компонента, которые, насколько я вижу, могут передавать данные из родительского компонента в дочерний и из дочернего в родительский. У меня проблема с моим дочерним компонентом SingleView У меня есть кнопки в этом компоненте, что я посылаю событие в родительский ImageSection для пошагового перехода через массив fileList. Это работает, но проблема в том, что мне нужно нажимать дополнительное время в обоих перемещение вперед и назад по массиву fileList.
Когда я смотрю его в инструментах разработчика vue, он идет -1, 0, 1, 2, когда у меня всего 3 файла в массиве, при переходе к предыдущему файлу он идет 3, 2, 1 , 0 затем выдает ошибку, потому что кнопка не отключается в начале или конце массива, что является еще одной проблемой, над которой я работаю.
Я не понимаю, почему я получаю дополнительное нажатие кнопки при переходе через массив?
мой код выглядит следующим образом
ImageSection. vue
<template>
<div id="imageContainer">
<app-actionbar :file-list="fileList" :current-position="currentPosition"></app-actionbar>
<app-image-section-single-view
v-on:updateFileList="onUpdateFileList"
:fileList="fileList"
:currentPosition="currentPosition"></app-image-section-single-view>
</div>
</template>
<script>
import Actionbar from "../Actionbar/Actionbar";
import ImageSectionSingleView from "./ImageSectionSingleView";
import {eventBus} from "../../main";
export default {
data() {
return {
fileList: [],
currentPosition: 0
}
},
methods: {
onUpdateFileList(files){
this.fileList.push.apply(this.fileList,
([...files].map((f) => ({
name: f.name,
data: URL.createObjectURL(f),
type: f.type
}))));
},
},
created() {
eventBus.$on('moveToNextFile', (positionNext) =>{
this.currentPosition = positionNext++ ;
});
eventBus.$on('moveToPreviousFile', (positionPrevious) => {
this.currentPosition = positionPrevious--;
});
},
components: {
appActionbar: Actionbar,
appImageSectionSingleView: ImageSectionSingleView
}
}
</script>
ImageSectionSingleView. vue
<template>
<div class="drop display-inline align-center" @dragover.prevent @drop="onDrop">
<div class="display-inline">
<img v-if="fileList.length > 0" :src="fileList[currentPosition].data" class="img" />
<img v-else src="../../assets/logo.png" class="img" />
</div>
</div>
</template>
<script>
export default {
props: {
fileList: { type: Array },
currentPosition: { type: Number}
},
methods:{
onDrop: function(e) {
e.stopPropagation();
e.preventDefault();
this.$emit('updateFileList', e.dataTransfer.files);
}
},
}
</script>
ActionBar. vue
<template>
<div class="actionbar image-control">
<div id="singleview" v-if="display === 'single'">
<app-single-view :currentPosition="currentPosition" :fileList="fileList" @clicked="displayBar"></app-single-view>
</div>
<div id="gridview" v-else>
<app-grid-view @clicked="displayBar"></app-grid-view>
</div>
</div>
</template>
<script>
import Gridview from "./Gridview.vue";
import Singleview from "./Singleview.vue";
export default {
data: function(){
return{
display: 'single'
}
},
props:{
currentPosition: { type: Number },
fileList: { type: Array }
},
methods: {
displayBar(value){
this.display = value;
}
},
components: {
'app-grid-view': Gridview,
'app-single-view': Singleview
}
}
</script>
SingleView. vue
<template>
<div class="icon-container">
<span class="nav-icons">
<label class="icon button" @click="movePrevious" :disabled="disablePrevious" id="btnPrevious"><icon-base title="Previous Image" view-box="0 0 512 512"><icon-previous/></icon-base></label>
<label class="icon button" @click="moveNext" :disabled="disableNext" id="btnNext"><icon-base title="Next Image" view-box="0 0 512 512"><icon-next/></icon-base></label>
</span>
<span class="iconbtn-container">
<label for="fileselect" id="btnAttach" class="icon button"><icon-base title="New" view-box="0 0 448 512" color="green"><IconAttach/></icon-base></label>
<input type="file" id="fileselect" @change="processFile($event)" hidden>
<label class="icon button" id="btnExport"><icon-base title="Export image" view-box="0 0 384 512"><icon-export/></icon-base></label>
<label class="icon button" id="btnDelete"><icon-base title="Delete image" view-box="0 0 384 512"><icon-delete/></icon-base></label>
<span class="seperator"></span>
<label class="icon button" @click="switchGridView" id="btnSingleView"><icon-base title="Single View" view-box="0 0 100 125"><icon-single-view/></icon-base></label>
</span>
</div>
</template>
<script>
import IconBase from "../icons/base/IconBase.vue";
import IconAttach from "../icons/IconAttach.vue";
import IconDelete from "../icons/IconTrash.vue";
import IconExport from "../icons/IconExport.vue";
import IconPrevious from "../icons/IconPrevious.vue";
import IconNext from "../icons/IconNext.vue";
import IconSingleView from "../icons/IconSingleView";
import {eventBus} from "../../main";
export default {
components: {
IconBase,
IconAttach,
IconDelete,
IconExport,
IconPrevious,
IconNext,
IconSingleView,
},
data(){
return {
currentPosition: 0,
fileList: []
}
},
methods: {
processFile(event){
this.fileData = event.target.files[0];
console.log(this.fileData);
},
switchGridView(event){
this.$emit('clicked','grid')
},
movePrevious(){
eventBus.$emit('moveToPreviousFile', this.currentPosition--);
},
moveNext(){
eventBus.$emit('moveToNextFile', this.currentPosition++);
},
disablePrevious(){
return this.currentPosition >= this.fileList.length - 1;
},
disableNext(){
return this.currentPosition <= 0;
}
}
}
</script>