Vue理解v-model以及监听数据变化





最近在学习使用 Vue 开发简单的页面,界面库使用了 Quasar

由于刚刚开始接触 Vue,很多地方不熟悉,浪费了不少时间。

以如下的页面为例:

代码很简单,但是涉及到多个方面的问题

Quasar 图标问题

Quasar 文档给出的例子中,默认使用 Google字库提供的图标文件来实现控件的图标,比如下箭头,如下图:

这个箭头图标就是通过如下代码引入的:

比较麻烦的是,上面的链接引入了太多的东西,导致我们在打包的时候,非常麻烦,因此最简单的方式就是使用SVG图标库提供的CSS文件。这个CSS文件可以直接下载到本地,部署到本地就可以了。

代码如下:

但是注意,需要在使用 Quasar 之前声明使用 SVG图标库,代码如下:

如果不使用上面的代码,界面会变成如下图的样子:

QSelect内容变更通知

我们希望当用户输入或者下拉选中的时候,得到控件的通知,把用户选中的数据记录到数据库中。在实际操作的时候,一直以为这个数据会有 QSelect 的事件通知,结果文档找了半天都没找到。

其实所有的 Vue 插件,都是通过 v-model 实现了数据的双向绑定,相关的代码如下:

QSelect 会在用户选中之后,更新model中的数据。

要实现上面的需要,我们使用 Vue 提供的侦听器(watch)功能来跟踪数据的变化,当model变化的时候,调用我们的函数。

相关的代码如下:

参考链接


发布者

发表评论

电子邮件地址不会被公开。 必填项已用*标注