vue如何修改data属性？

Question

var app = new Vue({
        el: "#app",
        data: {
            name:"", // 商家名称
            imageUrl:"", // 入门店图片
            description:"", // 商家描述
            address:"", // 商家地址
            wifiName: "",
            wifiPassword: "",
            phone: "", // 联系方式
            businessesLicence:"", // 营业执照
            registerNum:"", // 请传入注册号
            idCardBack: "",
            idCardFront: "",
            idCardHand: "",
            provideInvoice:"", // 是否提供发票
            businessTime:"", // 营业时间
        },
        mounted: function(){
        },
        methods: {
            // 请问如果对下面的方法进行封装？(因为他们的逻辑都是一样的)
            imageUrlUpload: function(e){
                // 上传门店图片
                var self = this;
                var file = e.target.files[0];
                if (!(file.type.indexOf('image')>-1)) {
                    alert('请选择图片格式');
                    self.imageUrl = "";
                    return;
                }
                var toekn = getCookie('access_token');
                var fd = new FormData();
                fd.append('file', e.target.files[0]);
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    console.log(xhr.status);
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        self.imageUrl = JSON.parse(xhr.responseText).data;
                    }
                };
                xhr.open('post', '/api/upload');
                xhr.setRequestHeader("enctype", "multipart/form-data");
                xhr.setRequestHeader("Authorization", "bearer "+toekn);
                xhr.send(fd);
            },
            businessesLicenceUpload: function(){
                // 上传营业执照

            },
            idCardFrontUpload: function(){
                // 上传正面身份证

            },
            idCardBackUpload: function(){
                // 上传反面身份证

            },
            idCardHandUpload: function(){
                // 上传持证照
            },
            uploadimg: function(e, fields){
                var self = this;
                var file = e.target.files[0];
                if (!(file.type.indexOf('image')>-1)) {
                    alert('请选择图片格式');
                    self.fields = ""; // 这里有问题 会去添加一个fields,而不是我想要的（修改self.xxx）
                    return;
                }
                var toekn = getCookie('access_token');
                var fd = new FormData();
                fd.append('file', e.target.files[0]);
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    console.log(xhr);
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        console.log(xhr);
                        // 修改data的时候，一般是`this.xx`，但是我使用的`fields`这种的，会去添加一个fields
                        self.fields = JSON.parse(xhr.responseText).data;
                    }
                };
                xhr.open('post', '/api/upload');
                xhr.setRequestHeader("enctype", "multipart/form-data");
                xhr.setRequestHeader("Authorization", "bearer "+toekn);
                xhr.send(fd);
            },
            submit: function(){
                alert(1);
            }
        }
    });

之前的html调用时 <input type="file" v-on:click="imageUrlUpload($event)">,
我想改成 <input type="file" v-on:click="uploadimg($event, fields)">,

Answer 1

1.代码逻辑问题在
self.fields = "";
这个只会访问'fields'这个成员而不是参数定义的fields
改为 self[fields]才能操作
2.你的做法需要vue实例一开始建立初始化数据的fields有才能得到监听。
你所访问的this.xxx,事实上是vue自身代理出来的实例“快捷方式”。
使用vue的时候多考虑一下数据驱动的思路。不要为了封装而封装。
3.不要使用alert，alert会全局阻塞

Answer 2

什么不管用，表达什么