javascript - Vue 数据绑定问题-PHP中文网问答

我是VUE初学者, 想请教大家一个数据绑定的问题.
我的业务上有一个这样的场景.
我需要上传N种尺寸类型的图片,每种尺寸的规则我都预先设置好了,我想在我选择尺寸的时候,切换我的配置,然后在上传的时候再做校验是否符合规则.
现在遇到的问题是，
我在选择图片类型的时候，数据的值会发生变化，但是在提交代码的时候值没变，我试过用setTimeout 来解决也不管用，请大家帮我看看，

主干代码如图:
HTML

<p class="form-group required">                                                                                                                                           
    <label class="control-label col-sm-3">图片类型</label>
    <p class="col-sm-8">
        {loop $imgTypeCfg $item}
            <label class="radio-inline" >
                <input type="radio" name="img_type" :value="{$item['val']}" 
                {if $item['val']==1}checked{/if}   @click="changeRadio" >
                {$item['name_cn']}
            </label>
        {/loop}
    </p>
</p>
 
<p class="form-group required">
    <label class="control-label col-sm-3">图片</label>
    <p class="col-sm-8">
        <p class="fileinput">
            <input type="file" name="img_file" id="img_file"
                v-bind="{'data-width':imgCfg.width,'data-size':imgCfg.size,'data-height':imgCfg.height}"
                data-width="{{imgCfg.width}}"
                data-height="{{imgCfg.height}}"
            />
 
            <input type="text" name="product_image" class="input-hidden"
                   v-model="imgInfo.img_url"/>
 
            <p class="thumbnail" v-if="imgInfo.img_url.length>0" style="margin-top:10px;">
                <i class="remove"></i>
                <img :src="imgInfo.img_url" style="width: 108px;height: 108px;">
            </p>
        </p>
    </p>
</p>

对应的JS

var Form = new Vue({                                                                                                                                                       
    el: '#add_gallery_form',
    data: { 
        imgTypeCfg: {json_encode($imgTypeCfg)},
        imgCfg:{ size:1000*1024, width:1226, height:460, },
        bigImgCfg: { size: 1000 * 1024, width: 1226, height: 460 },
        smallImgCfg: { size: 1000 * 1024, width: 295, height:175 },
    },      
    methods: {
        changeRadio:function(){
            $data = this.$data;
            var img_type =$("input[name='img_type']:checked").val();
            if (img_type==1){// 大图
                $data.imgCfg.width = $data.bigImgCfg.width;
                $data.imgCfg.height= $data.bigImgCfg.height;
            }else{ // 小图2
                $data.imgCfg.width = $data.smallImgCfg.width;
                $data.imgCfg.height= $data.smallImgCfg.height;
            }
        },  
        refreshTable: function () {
            var $data = this.$data;
            // filestyle
            $("input[name='img_file']").filestyle().each(function () {
                var $this = $(this);                                                                                                               
                $this.ajaxfileupload({
                    action: '/index.php?m=xxxxxx-image&do=ajaxUploadImage',
                    params: function () {
                        return {
                            max_size: $this.data("size"),
                            img_width: $this.data("width"),
                            img_height: $this.data("height")
                        }
                    }(),
                    onStart: function () {
                        $this.filestyle('disabled', true);
                    },
                    onComplete: function (response) {
                        $this.filestyle('disabled', false);
                        if (response.status === false) {
                            showAlertMsg("warning", response.message);
                            return;
                        }
                        if (response.code == 200) {
                            $this.siblings(".input-hidden").val(response.ext.path).change();
                        } else {
                            showAlertMsg('error', response.message);
                        }
                    }
                   });
            });