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警告]：无法编译模板... invalide expression

更新：

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

[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
    }
},

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

1 个答案: