assigning to rvalue解决解决

62 阅读 0 评论 41 点赞

我是靠谱客的博主飘逸花瓣，最近开发中收集的这篇文章主要介绍assigning to rvalue解决解决，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

遇到vue一直报错assigning to rvalue解决，一直以为是js代码的问题，后面找了很久的原因，才发现是在html的模板中v-model绑定的属性并没有在data属性中定义。如下：

<template>
    <div class="search-box">
        <div class="wrap">
            <input  v-model="searchText" class="search-input" type="text">
            <div class="search-botton"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'searchBox',
        data() {
            return {
            };
        }
    };
</script>

更改之后：

<template>
    <div class="search-box">
        <div class="wrap">
            <input  v-model="searchText" class="search-input" type="text">
            <div class="search-botton"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'searchBox',
        data() {
            return {
                searchText: ''
            };
        }
    };
</script>

解决问题。

主要注意的是这里的js代码中searchText是用驼峰格式的方式命名，在v-model中也是使用驼峰命名。不同于props在模板中使用是需要将js中的驼峰转换为短线的写法。这是因为html中的属性是不区分大小写的。但是这里v-model中是使用引号括起来的，所以可以区分大小写，反而使用短线分开会出错。详细参考：https://blog.csdn.net/yuetingzhuying/article/details/49820689