Nuxt.js 数据双向绑定的实现


Posted in Javascript onFebruary 17, 2019

假定我们有一个需求,一开始通过mounted()将一个字符串渲染在页面上,但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去,而不是跳转刷新页面来重新渲染

首先模板中data()中定义数据,并且要将定义的数据显示出来

<template>
  <div>
    <span @click="click">{{ text }}</span>
  </div>
</template>

<script>
  export default {
   data(){
    return {
     text: '',
     newText: '1'
    }
   },
   async mounted(){
     let {status,data:{text}} = await self.$axios.post('/getText');
     this.text = text;
   }
  }
</script>

然后我们通过methods里的函数来获取后台的数据

methods:{
  async click(){
    let {status,data:{text}} = await self.$axios.post('/updateText',{
      text,
      newText
    })
   
    this.text = text;
  }
  
}

服务端的接口如下

router.get('/getText', async (ctx) => {
  let text= await Text.find();
  ctx.body = {
    text
  }
}

router.post('/updateText', async (ctx) => {
 const {text,newText} = ctx.request.body;
 let oldVal = text;
 let newVal = newText;

 let ncomment = await Comment.updateOne(oldVal,newVal);

 let text= await Text.find();

 ctx.body={
  text
 }
})

这里有个重点!

获取页面传过来的参数时必须使用结构赋值的方法获取,不然获取到的为一个Object,查询将会出错!

双向绑定在这里的体现是:一开始通过mounted()将数据渲染到模板中,然后调用函数通过服务端的updateText接口改变数据,在updateText接口中更新完数据后,执行一遍查询,将查询结果返回到触发的函数中。并在该函数中修改data()中text的值达到数据双向绑定的效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
js实现旋转的星空效果
Nov 01 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 #Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
You might like
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php中file_exists函数使用详解
2015/05/08 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
竞聘上岗演讲
2014/05/19 职场文书
高考励志标语
2014/06/05 职场文书
考试没考好检讨书
2015/05/06 职场文书
python中的3种定义类方法
2021/11/27 Python