我正在尝试访问 Vue dropzone 组件内的父组件属性。我想从 Vue dropzone 内部访问表单的照片字段,以便将图片分配给表单照片字段。代码如下:
我正在使用带有图片字段的 v-form:
JavaScript:
<script>
import vueDropzone from "vue2-dropzone";
export default {
data() {
return {
form: new Form({
id: "",
name: "",
email: "",
password: "",
type: "",
bio: "",
photo: ""
}),
dropOptions: {
url: "https://httpbin.org/post",
maxFilesize: 2, // MB
maxFiles: 4,
chunking: true,
chunkSize: 500, // Bytes
autoProcessQueue:false,
addRemoveLinks: true,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>Arraste ou clique aqui!!!!!!!!",
addRemoveLinks: true,
duplicateCheck: true,
init: function () {
console.log('firstthis ',this)
this.on("addedfile", function(file) {
console.log("Added file ", file);
// globalThis.form.photo = file // I want to assign the value of the file to the form field
});
// this.vdropzone-duplicate-file(file)
}
},
photoChanged: false,
};
},
components: {
vueDropzone
},
HTML:
<div class="form-group">
<label for="dropzone" class="col-md-12 control-label">Choose a profile
picture:</label>
<div id="dropzonedivid">
<vue-dropzone id="dropvue" :options="dropOptions"></vue-dropzone>
</div>
</div>