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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
MySQL修改密码方法总结
2008/03/25 PHP
php 文件上传类代码
2011/08/06 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Javascript Objects详解
2014/09/04 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python实现的各种排序算法代码
2013/03/04 Python
Python 操作文件的基本方法总结
2017/08/10 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
学习经验交流会主持词
2014/04/01 职场文书
机关作风建设心得体会
2014/10/22 职场文书