Property or method "input" is note, either in the data option...错误解决办法及原因剖析

最新推荐文章于 2023-11-12 08:13:09 发布

两节课同学

最新推荐文章于 2023-11-12 08:13:09 发布

阅读量919

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43266764/article/details/103995960

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端刚入行，最近做了一个项目，vue+element ui，在使用element ui提供的标签后，打开浏览器，发现输入框正常显示，但是打开调试，发现控制台报错，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h3SvP0Oi-1579092582622)(/Users/lijiakang/Library/Application Support/typora-user-images/image-20200115202817650.png)]

代码如下：

<el-input v-model="input" placeholder="请输入内容"></el-input>

按照错误提示进入链接，https://cn.vuejs.org/v2/guide/reactivity.html，发现是关于vue响应式的讲解，用来追踪输入变化，再看看粘过来的代码，原来代码中出现了v-model=“input”，把它删掉即可，或者通过javascript中data设置初始值，如下：

<script>
export default {
  //数据交互响应绑定
  data(){
    return{
      input: '111'
    }
  }
}
</script>

进行了上面的设置后，以后每次打开后，输入框内都会显示设置好的默认值。

那么v-model是什么？

阅读官方文档，是这么定义的：可以使用v-model对,,上创建双向数据绑定，它会根据标签类型自动选取正确的方法来更。新数据，总的来说它负责监听用户的输入并且更新数据，就是这样，需要注意的是，使用v-model后，它会自动忽略标签的初始值，而只使用vue实例中使用的数据，即data设置的初始值。