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

 更新时间:2019年02月17日 11:03:01   作者:rirmk  
这篇文章主要介绍了Nuxt.js 数据双向绑定的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

假定我们有一个需求,一开始通过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的值达到数据双向绑定的效果

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

相关文章

  • Jquery实现的tab效果可以指定默认显示第几页

    Jquery实现的tab效果可以指定默认显示第几页

    tab效果想必大家在网上都有见过很多吧,在本文将为大家介绍下如何实现可以在代码里面指定默认显示第几页的tab效果,感兴趣的朋友不要错过
    2013-10-10
  • js或css实现滚动广告的几种方案

    js或css实现滚动广告的几种方案

    今天无事逛网,突然发现了一个很有趣的事情,(也许只有我觉得有趣).我看到一图片竟然在我拖动滚动条的时候没有动,也许你会说我少见多怪,不信你去找个这样的我看看,很少有的,一般的都是一拖动图片就在那跳得厉害。
    2010-01-01
  • WebView启动支付宝客户端支付失败的问题小结

    WebView启动支付宝客户端支付失败的问题小结

    这篇文章主要介绍了WebView启动支付宝客户端支付失败的问题小结的相关资料,需要的朋友可以参考下
    2017-01-01
  • JS闭包可被利用的常见场景小结

    JS闭包可被利用的常见场景小结

    闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数。例如,在web环境中,一个函数作为setTimeout函数调用的第一个参数,是一种很常见的应用
    2017-04-04
  • js中cookie的添加、取值、删除示例代码

    js中cookie的添加、取值、删除示例代码

    cookie的应用在网页中很常见,在本文为大家介绍下js中如何对cookie进行添加、取值、删除,感兴趣的朋友不要错过
    2013-10-10
  • js 实现浏览历史记录示例

    js 实现浏览历史记录示例

    这篇文章主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
    2014-04-04
  • 微信小程序实现滑动删除

    微信小程序实现滑动删除

    这篇文章主要为大家详细介绍了微信小程序实现滑动删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • input输入框的自动匹配(原生代码)

    input输入框的自动匹配(原生代码)

    功能要求:使用原生代码实现,不可使用任何框架、只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗、通过键盘上的上下箭头可以对菜单进行选择等等,感兴趣的你可以参考下
    2013-03-03
  • 原生JS中slice()方法和splice()区别

    原生JS中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法。那么他两种有什么区别呢?今天通过本文教程给大家简单介绍下,需要的朋友可以参考下
    2017-03-03
  • js 通过cookie实现刷新不变化树形菜单

    js 通过cookie实现刷新不变化树形菜单

    通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单
    2014-10-10

最新评论