Vue/laravel - ブレードからvueへのデータの受け渡し

Question

私はVueを初めて使い慣れているので、作成したフォームでうまく動作するコンポーネントをどのように変更すればいいか、私は変更したい私はそれを編集フォームにも使うことができます。私がする必要があるのは、イメージsrcをDBから取得するイメージに設定することです（存在する場合）。それをどうすれば実現できますか？

<template> 
<div> 
    <div v-if="!image"> 
    <h2>Select an image</h2> 
    <input type="file" @change="onFileChange"> 
    </div> 
    <div v-else> 
    <img :src="image" /> 
    <input type="file" name="image" style="display:none"> 
    <button @click="removeImage">Remove image</button> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
     image: '', 
     formData:new FormData(), 
     file: null 
     } 
    }, 
    methods: { 
     onFileChange: function onFileChange(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
      this.formData.append('file', files[0]); 
      this.file = files[0]; 
     }, 
     createImage: function createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 
      reader.onload = function (e) { 
       vm.image = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 
     removeImage: function removeImage(e) { 
      this.image = ''; 
     } 
    } 
} 
</script> 

私は私の見解でこれをやって試してみました： これは、コンポーネントファイルです

<image-upload :image="/uploads/{{ $magazine->image }}"></image-upload> 

しかし、私はエラーを取得：

[Vue warn]: failed to compile template ...invalide expression

更新を：

回答として提案したとおりディレクティブから:を移動し、それが働いていたが、私は、コンソールになりました警告メッセージが表示されます：

[Vue warn]: The data property "image" is already declared as a prop. Use prop default value instead. (found in component)

Answer 1

小道具警告がある、あなたのデータプロパティにイメージを持っているので

data() { 
    return { 
    image: '', 
    formData:new FormData(), 
    file: null 
    } 
}, 

必要にそれを削除して小道具のプロパティに追加してください。

props: { 
    image: { 
     type: String, 
     default: "" 
    } 
}, 
data() { 
    return { 
    formData: new FormData(), 
    file: null 
    } 
},