[英]VueJS - Update parent values from emit with parameters?
I don't really know how to put it but i'll explain:我真的不知道该怎么说,但我会解释一下:
I have a form where the user can upload an image.我有一个表单,用户可以在其中上传图像。 The upload image goes as followes
上传图片如下
<input id="visualisation_upload" @change="onThumbnailChanged" name="visualisation_upload" accept="image/*" type="file" class="sr-only">
onThumbnailChanged (event) {
const file = event.target.files[0];
this.fields.thumbnail = file;
this.fields.thumbnailPreview = URL.createObjectURL(file);
},
I want to show the user which files has been uploaded and let them delete the files if they so desire.我想向用户展示哪些文件已上传,并让他们根据需要删除文件。 For that exact purpose I use a component called
uploadedFiles
为此,我使用了一个名为
uploadedFiles
的组件
I call the component like follows:我将组件称为如下:
<uploadedFiles v-if="this.fields.thumbnail" :file="this.fields.thumbnail" :preview="this.fields.thumbnailPreview" @update-images="updateFiles"></uploadedFiles>
Within the uploadedFiles component I have a click Event that is supposed to empty both props within uploadedFiles AND the props that were passed to the component.在 uploadFiles 组件中,我有一个 click 事件,它应该清空 uploadFiles 中的道具和传递给组件的道具。 When I try do to it directly within the component like this (Which you shouldn't do) I of-course get
Avoid Mutating a Prop Directly
:当我尝试直接在这样的组件中执行它时(你不应该这样做),我当然会
Avoid Mutating a Prop Directly
:
deleteFiles() {
this.file = ''
this.preview = null
}
Within the parent component I have a method there I would like to empty the values like this在父组件中,我有一个方法,我想清空这样的值
<a @click="$emit('update-images', file, preview), file = '', preview = null" class="hover:text-gray-900 cursor-pointer"></a>
updateFiles: function(file, preview) {
file = ''
preview = null
},
But I can't seem to make it work.但我似乎无法让它工作。 I am trying to make the component dynamic so I don't have to create the method in each component.
我正在尝试使组件动态化,因此我不必在每个组件中创建方法。
I don't know if i am making any sense.我不知道我是否有任何意义。 Point is, when clicked on the button.
点是,当点击按钮时。 Empty both
this.fields.thumbnail
& file
from the component.从组件中清空
this.fields.thumbnail
和file
。 How can I accomplish this?我怎样才能做到这一点?
You can emit update:xxx
events and then use xxx.sync
modifier in the parent ( https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier ):您可以发出
update:xxx
事件,然后在父级( https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier )中使用xxx.sync
修饰符:
<uploadedFiles
v-if="this.fields.thumbnail"
:file.sync="this.fields.thumbnail"
:preview.sync="this.fields.thumbnailPreview"
/>
deleteFiles()
{
this.$emit('update:file', '');
this.$emit('update:preview', null);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.