1

In My laravel + Spark + Vue js project, I have used https://github.com/Vanthink-UED/vue-core-image-upload, They have code like

export default {
props:{
 cropBtn: {
    type: Object,
    default: function() {
      return {
        ok: '保存',
        cancel: '取消',
      }
    }
  }
}

As per their documentationm, If you want to change button text then do following

cropBtn Object {ok:'Save','cancel':'Give Up'} the text of crop button

I have used like

<vue-core-image-upload 
                      v-bind:class="['pure-button','pure-button-primary','js-btn-crop']" 
                      v-bind:crop="true" url="/process-image" 
                      extensions="png,gif,jpeg,jpg" 
                      cropBtn="[{ok: 'Save',cancel: 'Cancel'}]"                     
                      v-on:imageuploaded="imageuploaded">
                    </vue-core-image-upload>

and

v-bind:cropBtn="items"

js file

module.exports = {
prop:['cropBtn'],
data() {        
     return {
         items: [{
                    ok: 'Save',
                    cancel: 'Cancel',
                  }],
                  cropBtn: {
                            type: Object,
                            default: function() {
                              return {
                                ok: 'Save',
                                cancel: 'Cancel',
                              }
                            }
                          },

        src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png'            
    };
}
};

But it is not working. I am getting same default Chinese value.

Any suggestions what can be the solution?

Saurabh
  • 71,488
  • 40
  • 181
  • 244
Jass
  • 3,345
  • 3
  • 24
  • 41
  • i think it should be like :cropBtn="{ok: 'Save',cancel: 'Cancel'}" since you want to "v-bind" the prop and it expects an object - also you shouldnt add the cropBtn to your data return – Frnak Feb 07 '17 at 12:27
  • I have tried but it did not work. – Jass Feb 07 '17 at 12:45

1 Answers1

4

You need to use kebab-case when passing props that are declared in camel case and you must use v-bind or the shorthand : when passing javascript objects through props:

<vue-core-image-upload :crop-btn="{ok: 'Save',cancel: 'Cancel'}"                     ></vue-core-image-upload>

see: https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

tony19
  • 125,647
  • 18
  • 229
  • 307
craig_h
  • 31,871
  • 6
  • 59
  • 68
  • 1
    This should be right, however I still think the data should'nt be an array. I'd also suggest @Jass you try to add Vue devtools to your chrome to make it more easy to identifiy such problems. – Frnak Feb 07 '17 at 13:59
  • @FrankProvost Yes, I agree it looks like it should take an object, I'll update my answer. – craig_h Feb 07 '17 at 14:13