Nuxt.js 數據雙向綁定的實現

這篇文章主要介紹了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的值達到數據雙向綁定的效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。