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的值達到數據雙向綁定的效果