更新全局组件数据答案

【问题标题】：Update Global Component data更新全局组件数据
【发布时间】：2018-12-16 01:16:00
【问题描述】：

我正在用我的新代码更新它。我需要在 dropzones“onSuccess”方法中获取对数据对象的“allImages”属性的引用。有什么办法吗。

<template>
<div class="container">
    <div class="row">
        <form action="/user/album_images" id="dropzone" class="dropzone" method="post">

        <input type="hidden" id="album_id" name="album_id" :value=image.id>
            </form>
    </div>

    <div class="row">
        <div class="col-md-3" v-for="image in albumImages">
        <img src="https://mysite.nyc3.digitaloceanspaces.com/users/62MY43og3ZNCLU4y53iwoqdEfUZUWFEfDM2f9krn.png" class="img-responsive" style="width: 120px; height: 90px;">

        </div>
    </div>


</div>
</template>

<script>
    export default {
    props: ['theImage','theAlbumImages'],
     data() {
        return {
        image: this.theImage,
        albumImages: this.theAlbumImages

        }
     },


        methods: {

        },




    }
 let csrfToken = document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value
    Dropzone.options.dropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 10, // MB
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        init: function() {
            this.on("success", function(file,albumImage) {

               // I want to get a reference to the vue instances "albumImages" property


            });
        },
        headers: {
            'x-csrf-token': csrfToken
        }
    };
</script>

【问题讨论】：

标签： laravel vue.js vue-component

【解决方案1】：

你可以尝试使用vue-script2

您将能够像在模板中一样访问 vue 变量。

<script2>
....
 this.on("success", function(file,albumImage) {

              var x = {{albumImages}}


            });
....
</script2>

虽然它可能不起作用。其他选择是在mounted中尝试加载功能。例如

import VS2 from 'vue-script2'
export default {
  name: 'freshchat',
  mounted() {
    VS2.load('yourdropzonejs script').then(() => {
           var vm = this
           .....
           this.on("success", function(file,albumImage) {

               vm.albumImages


            });

    })
  }
}

【讨论】：