Vuejs2 移动阵列时出现Vue组件问题
我是vuejs的新手，现在仍在学习我有4个组件，据我所知，我可以将数据从父组件传递到子组件，从子组件传递到父组件。我遇到的问题是我的子组件SingleView，我在该组件中有按钮，我正在向父ImageSection发送事件，以单步通过文件列表数组。它可以工作，但问题是我必须在向前和向后移动文件列表数组时单击额外的时间 当我在vue开发工具中查看它时，它会变为-1、0、1、2，当我移动到上一个文件时，阵列中只有3个文件时，它会变为3、2、1、0，然后出错，因为按钮在阵列的开头或结尾没有禁用，这是我正在处理的另一个问题 我不明白为什么我在通过阵列时会得到额外的按钮点击 我的代码如下 ImageSection.vueVuejs2 移动阵列时出现Vue组件问题,vuejs2,Vuejs2,我是vuejs的新手，现在仍在学习我有4个组件，据我所知，我可以将数据从父组件传递到子组件，从子组件传递到父组件。我遇到的问题是我的子组件SingleView，我在该组件中有按钮，我正在向父ImageSection发送事件，以单步通过文件列表数组。它可以工作，但问题是我必须在向前和向后移动文件列表数组时单击额外的时间 当我在vue开发工具中查看它时，它会变为-1、0、1、2，当我移动到上一个文件时，阵列中只有3个文件时，它会变为3、2、1、0，然后出错，因为按钮在阵列的开头或结尾没有禁用，这是我
<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>
从“./Actionbar/Actionbar”导入Actionbar；
从“/ImageSectionSingleView”导入ImageSectionSingleView；
从“../../main”导入{eventBus}；
导出默认值{
数据（）{
返回{
文件列表：[]，
当前位置：0
}
},
方法：{
ONUpdate文件列表（文件）{
this.fileList.push.apply（this.fileList，
（[…文件].map（（f）=>({
姓名：f.name，
数据：URL.createObjectURL（f），
类型：f.type
}))));
},
},
创建（）{
eventBus.$on（'moveToNextFile'，（positionNext）=>{
this.currentPosition=positionNext++；
});
eventBus.$on（'moveToPreviousFile'，（positionPrevious）=>{
this.currentPosition=位置先前--；
});
},
组成部分：{
appActionbar:Actionbar，
appImageSectionSingleView:ImageSectionSingleView
}
}
<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>
<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>
导出默认值{
道具：{
文件列表：{type:Array}，
当前位置：{type:Number}
},
方法：{
onDrop：函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
此.emit（'updateFileList'，e.dataTransfer.files）；
}
},
}
<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>
从“/Gridview.vue”导入Gridview；
从“/Singleview.vue”导入Singleview；
导出默认值{
数据：函数（）{
返回{
显示：“单个”
}
},
道具：{
当前位置：{type:Number}，
文件列表：{type:Array}
},
方法：{
显示栏（值）{
这个。显示=值；
}
},
组成部分：{
“应用程序网格视图”：网格视图，
“应用程序单一视图”：单一视图
}
}
<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>
<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>
从“./icons/base/IconBase.vue”导入IconBase；
从“./icons/IconAttach.vue”导入IconAttach；
从“./icons/IconTrash.vue”导入IconDelete；
从“./icons/IconExport.vue”导入IconExport；
从“./icons/IconPrevious.vue”导入IconPrevious；
从“./icons/IconNext.vue”导入IconNext；
从“./icons/IconSingleView”导入IconSingleView；
从“../../main”导入{eventBus}；
导出默认值{
组成部分：{
IconBase，
Iconatach，
我要删除，
IconExport，
我先前，
IconNext，
IconSingleView，
},
数据（）{
返回{
当前位置：0，
文件列表：[]
}
},
方法：{
进程文件（事件）{
this.fileData=event.target.files[0]；
console.log（this.fileData）；
},
switchGridView（事件）{
此.$emit（'单击'，'网格'）
},
movePrevious（）{
eventBus.$emit（'moveToPreviousFile'，this.currentPosition--）；
},
moveNext（）{
eventBus.$emit（'moveToNextFile'，this.currentPosition++）；
},
disablePrevious（）{
返回this.currentPosition>=this.fileList.length-1；
},
disableext（）{
返回此。currentPosition问题已解决，我必须将数据属性作为道具传递给孩子们，然后相应地使用这些道具。为什么要在两个位置递增和递减当前位置？这是一个错误，我实际解决了问题。