2017-02-07 3 views
1

In My Laravel + Спарк + Vue расслоения плотного проекта, я использовал https://github.com/Vanthink-UED/vue-core-image-upload, Они имеют код, каккак передать объект vuejs

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

По их documentationm, если вы хотите изменить текст кнопки, то сделать следующее

cropBtn Object {оК: 'Сохранить', 'отменить': 'Give Up'} текст урожая кнопка

Я использовал как

<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 файл

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

Но это не работает. Я получаю то же значение по умолчанию по-китайски.

Любые предложения, какими могут быть решения?

+0

я думаю, что это должен выглядеть так: cropBtn = "{ok:« Сохранить », отменить:« Отменить »}« так как вы хотите «v-bind» prop и он ожидает объект - также вы не должны добавлять cropBtn к возвращаемым данным. –

+0

I попытались, но это не сработало. – Jass

ответ

3

Вы должны использовать kebab-case при прохождении props, которые объявлены в ГорбатыйРегистр и вы должны использовать v-bind или сокращенную : при прохождении Javascript объектов через реквизит:

<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

+1

Это должно быть правильно, однако я все же думаю, что данные не должны быть массивом. Я также предлагаю @Jass, что вы пытаетесь добавить Vue devtools на свой хром, чтобы облегчить идентификацию таких проблем. –

+0

@FrankProvost Да, я согласен, похоже, что он должен взять объект, я обновлю свой ответ. –

Смежные вопросы