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

时间:2020-05-16 rirmk 人气:0

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

加载全部内容