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的值达到数据双向绑定的效果