Vue/laravel - 将数据从刀片传递到 vue 组件

Question

我是 Vue 的新手，刚刚学习它，所以我想知道如何修改我拥有的适用于创建表单的组件，我想修改它以便我可以将其用于编辑表单好吧。我需要做的是将图像 src 设置为我从数据库中获得的图像（如果存在）。我怎样才能做到这一点？ 这是组件文件：

<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 警告]：无法编译模板...无效的表达式

更新：

我按照答案中的建议做了，并从指令中删除了:，它起作用了，但我现在在控制台中收到一条警告消息：

[Vue 警告]：数据属性“image”已被声明为 prop。 请改用 prop 默认值。 （在组件中找到）

Answer 1

道具警告是因为您的数据属性中有图像

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

您需要将其从那里移除并将其添加到 props 属性中

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