Question

在我的laravel + Spark + Vue js项目中，我使用了https://github.com/Vanthink-UED/vue-core-image-upload，它们的代码类似于

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

根据他们的文档，如果您想更改按钮文本，请执行以下操作

cropBtn对象{ok：'保存'，'取消'：'放弃'}裁剪文字按钮

我用过像

<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>

和

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'            
    };
}
};

但它不起作用。我得到相同的默认中文值。

有什么建议可以解决方案吗？

Answer 1

在传递以驼峰形式声明的kebab-case时，您需要使用props，并且在通过道具传递javascript对象时必须使用v-bind或速记:：< / p>

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

请参阅：https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

如何传递对象vuejs

1 个答案: