イメージsrcをvueコンポーネントの文字列として設定するにはどうすればよいですか？

Question

ベース64エンコード形式のイメージをサーバーに送信するための2つのコンポーネントを作成しました。親コンポーネントがマウントされると、子参照をfileに設定することになっています。それがどのように実装できるか

Vue.component('some-form', { 
    template: '#some-form', 
    data: function() { 
    return { 
     logoImage: '', 
     coverImage: '' 
    } 
    }, 
    methods: { 
    onSubmit: function(event) { 
     var dataForm = {}; 
     var that = this; 
     dataForm['logo-image'] = this.logoImage; 
     dataForm['cover-image'] = this.coverImage; 

     // AJAX REQUEST HERE with posting data 
    }, 
    }, 
    mounted: function(){ 
    var $this = this; 

    // AJAX REQUEST HERE with getting data 
    } 
}); 

Vue.component('upload-photo', { 
    template: '#upload-photo', 
    data: function() { 
    return { 
     image: { 
     body: '', 
     'content-type': '', 
     'content-length': '', 
     url: '' 
     }, 
     imageBody: '' 
    } 
    }, 
    props: ['logoImage', 'title', 'description'], 
    watch: { 
    'image': function() { 
     this.$emit('input', this.image); 
    } 
    }, 
    created: function(){ 
    this.image = this.logoImage; 
    }, 
    mounted: function() { 
    var that = this; 
    //AJAX REQUEST HERE to get data 
    }, 
    methods: { 
    onFileChange: function(e) { 
     var files = e.target.files || e.dataTransfer.files; 
     if (!files.length) 
     return; 
     this.createImage(files[0]); 
    }, 
    createImage: function(file){ 
     var image = new Image(); 
     var reader = new FileReader(); 
     var vm = this; 
     vm.image = {}; 

     reader.onload = function(e) { 
     vm.image.body = e.target.result; 
     vm.imageBody = e.target.result; 
     }; 

     vm.$set(vm.image, 'content-type', file.type); 
     vm.$set(vm.image, 'content-length', file.size); 

     reader.readAsDataURL(file); 
    }, 
    removeImage: function (e) { 
     this.image = ''; 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: function() { 

    }, 
    methods: { 

    }, 
    mounted: function() { 

    } 
}); 

全例https://codepen.io/anon/pen/ZvzwzO ？

P.S.同じコンポーネントに実装する方法がわかりません。私は2つのプロパティを持つ文字列としてデータを送信しますが、文字列として取得しますが、それはリンクです。

P.S.検索するだけの方法が必要です。

Answer 1

あなたが求めていることを正確に伝えるのは難しいですが、親コンポーネントから子にデータを渡すように思えます。まだお持ちでない場合は、親コンポーネントから子コンポーネントにプロパティを渡す場合は、Composing componentsとDynamic Propsをお読みください。

これを行う1つの方法は、データの一部ではなくupload-photoのプロパティをimageBodyのプロパティにすることです。

<upload-photo v-model="logoImage" title="TITLE 1" description="description_1" v-bind:image-body="imageBody"> 

はthis phpfiddleを見てみましょう：

props: ['logoImage', 'title', 'description', 'imageBody'], 

はその後、親がそのプロパティの値を指定する必要があります。フォームがマウントされると、AJAXコールをサーバーに送り返してURLを取得し、その最初の upload-photo子要素のプロパティーを、AJAX応答でサーバーから送り返されたURLに設定します。 upload-photoテンプレートが imageBodyが imageの代わりに真実である場合に画像を表示するように変更されていることに注意してください。