v-model与value的赋值顺序问题

开心是星星

已于 2022-06-20 16:54:56 修改

阅读量2k

点赞数 1

分类专栏：前端文章标签： vue js

于 2021-12-03 13:58:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49562132/article/details/121696533

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文详细探讨了Vue中v-model与value属性的区别和相互作用，指出v-model不会受到value初始值的影响，并解释了在图片上传场景下，为何v-model无法直接双向绑定数据。解决方案是通过ref在生命周期中重新赋值，确保数据同步。同时，文章通过代码示例展示了如何正确处理这种情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现的问题

<span style="position: relative">
<input type="text" id="article-img" v-model="blog.img" ref="blogimg" class="article-title"
       placeholder="上传封面图" style="width: 18%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
<span id="filePicker" style="position: absolute;top:-10px;right:20px;">选择图片</span>
<img style="position: absolute;top:-10px;right:-40px;" width="48" height="40" id="imgshow" alt="">
</span>

// 文件上传成功的回调
    uploader.on( 'uploadSuccess', function( file,response ) {
        // console.log(response)
        document.getElementById("article-img").value = response.url;
        document.getElementById("imgshow").src = response.url;
        cacheBlog();
        vm.blog.img = response.url;
    });

saveBlog(){

this.blog.img = this.$refs.blogimg.value;

}

此处为什么不能因为图片的上传触发v-model实现数据的双向绑定呢？

首先：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

第二：document.getElementById("article-img").value = response.url;它给value赋值，没有给v-model赋值，它不会同步到<input type="text" v-model = "blog.img" value="xxxxxx"/>中。

第三：赋值顺序，

freemarker的优先级最高----value有了----然后去加载js---- vue----v-model="blog.img" -----去数据模型data找有没有---如果没有就会把value覆盖掉------同步到页面就是空。
freemarker的优先级最高----value有了----然后去加载js---- vue----v-model="blog.img" --经过生命周期created通过js或者ref方式获取value值---赋值给数据模型blog.img--有值-----同步到页面就是有值了

freemarker先加载---value理论有值----然后页面加载js--vue初始化----开始同步页面----v-model会把自己的值去覆盖value

第四：此处出现的问题就是value有值了，但是v-model取data中的值是没有的，v-model覆盖掉了value的值，导致无值问题的出现。

第五：解决方案就是在生命周期中再进行赋值一遍，这里就是用ref实现的，再让v-model去同步，实现数据双向绑定赋值。

第六：此时出现的主要误区就是：v-model与value不是你有值我就应该有值的关系，此处是先对value赋值，这和v-model赋值无直接关系，v-model的值是在data中取来的，和value无关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <input id="test1" v-model="a" ref="aing" value="aaa">
    <a @click="testvalue"> 给value赋值 </a>
    <a @click="testvue">给vue赋值</a>
</div>

</body>
<script src="/js/vue.min.js"></script>
<script>

    function testvalue(){
        document.getElementById("test1").value="hello"
    }

    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "测试2"
        },
        created: function () {
            console.log(this.a)
        },
        methods: {
            testvue() {
                this.a=this.$refs.aing.value;
                console.log(this.a)
            }
        }
    })
</script>

<script src="/js/jquery.min.js"></script>
</html>