Meet the vue has been an error assigning to rvalue solution, always thought that is a question of js code, look behind for a long time, were found in the HTML template v – model binding attribute is not defined in the data property. As follows:

<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>

After modification:

<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>

Solve problems.
The main thing to notice here is that in js code searchText is named in hump format, as well as in V-Model. Props being used in the template is not the same as wanting to convert the hump in JS to a short line. This is because the attributes in HTML are case-insensitive. However, v-Model is enclosed in quotation marks, so it is case sensitive, while short lines make an error. Detailed reference: https://blog.csdn.net/yuetingzhuying/article/details/49820689