javascript - 更改vue图片 uploader 的属性

标签 javascript vue.js vuejs2

我正在尝试使用此 vue.js 上传我的图像。我正在使用这个plugin为了任务。但我需要改变语言。在文档中,我们可以通过使用 props 来改变它。我做到了,

:drag-text='drag_text'

这是我的完整代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue-upload-multiple-image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <div id="car_ad_others"></div>
        </div>


        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>


        <script type="text/javascript">
             var parent = $('#car_ad_others').parent();
             parent.html('<div id="car-image-upload"><upload-component></upload-component></div>');
             $('#car_ad_others').parent().attr('id', 'car_ad_parent');

             Vue.component('upload-component', {
                 props: ['dragText'],
                 data: function () {
                     return {
                         images: '',
                         uploadImageSuccess: '',
                         beforeRemove: '',
                         editImage: '',
                         dataChange: '',
                         drag_text: 'ddd'
                     };
                 },
                 template: "<div id='my-strictly-unique-vue-upload-multiple-image' style='display: flex; justify-content: center;'><vue-upload-multiple-image :drag-text='drag_text' @upload-success='uploadImageSuccess' @before-remove='beforeRemove' @edit-image='editImage' @data-change='dataChange' :data-images='images'></vue-upload-multiple-image></div>"
             });
             new Vue({el: '#car-image-upload'});
    </script>
    <script src="https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js"></script>
    </body>
</html>

不幸的是它没有被翻译,我也遇到了这个错误,

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

属性在此 link 。我简化了代码以更容易地显示问题。所以我无法改变结构。

最佳答案

看来,库本身存在错误。文档中的codepen似乎没有响应 Prop 更改。关于您[Vue warn]: Unknown custom element:警告,不知何故这对我有用:

    components: {
       'vue-upload-multiple-image': () => import('https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js')
    },

并评论<script src="https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js"></script>

我仍在试图弄清楚如何,但它应该与本地注册组件与组件的全局注册相关。当我提供更好、更具体的解释时,我将改进这个答案

关于javascript - 更改vue图片 uploader 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54242389/

相关文章:

javascript - VueJS 动态属性名称不更新值

javascript - 获取要在 div 中显示的默认值

javascript - Axios 返回字符串而不是 JSON (vue.js)

javascript - 清除搜索输入后将响应重置为 null Vue.js

javascript - 如何在 Vuex 状态创建中使用函数

javascript - t.replace 不是一个函数(…)trim

javascript - 将字符串数组的字符串解析回数组

css - vue-路由器 : how to remove underline from router-link

javascript - 我可以让 Vue.js 跨站点保持事件状态吗?

jquery - 如何在 vue.js 应用程序中使用 jQuery 脚本?