快捷導(dǎo)航

Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)

更新時間：2019年02月17日 11:03:01 作者：rirmk

這篇文章主要介紹了Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

假定我們有一個需求，一開始通過mounted()將一個字符串渲染在頁面上，但是我們經(jīng)過操作后修改了數(shù)據(jù)并且需要將得到的結(jié)果重新異步渲染到頁面中去，而不是跳轉(zhuǎn)刷新頁面來重新渲染

首先模板中data()中定義數(shù)據(jù)，并且要將定義的數(shù)據(jù)顯示出來

<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里的函數(shù)來獲取后臺的數(shù)據(jù)

methods:{
  async click(){
    let {status,data:{text}} = await self.$axios.post('/updateText',{
      text,
      newText
    })
   
    this.text = text;
  }
  
}

服務(wù)端的接口如下

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
 }
})

這里有個重點(diǎn)！

獲取頁面?zhèn)鬟^來的參數(shù)時必須使用結(jié)構(gòu)賦值的方法獲取，不然獲取到的為一個Object，查詢將會出錯！

雙向綁定在這里的體現(xiàn)是：一開始通過mounted()將數(shù)據(jù)渲染到模板中，然后調(diào)用函數(shù)通過服務(wù)端的updateText接口改變數(shù)據(jù)，在updateText接口中更新完數(shù)據(jù)后，執(zhí)行一遍查詢，將查詢結(jié)果返回到觸發(fā)的函數(shù)中。并在該函數(shù)中修改data()中text的值達(dá)到數(shù)據(jù)雙向綁定的效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)的tab效果可以指定默認(rèn)顯示第幾頁
tab效果想必大家在網(wǎng)上都有見過很多吧，在本文將為大家介紹下如何實(shí)現(xiàn)可以在代碼里面指定默認(rèn)顯示第幾頁的tab效果，感興趣的朋友不要錯過
2013-10-10
js或css實(shí)現(xiàn)滾動廣告的幾種方案
今天無事逛網(wǎng)，突然發(fā)現(xiàn)了一個很有趣的事情，（也許只有我覺得有趣）.我看到一圖片竟然在我拖動滾動條的時候沒有動，也許你會說我少見多怪，不信你去找個這樣的我看看，很少有的，一般的都是一拖動圖片就在那跳得厲害。
2010-01-01
WebView啟動支付寶客戶端支付失敗的問題小結(jié)
這篇文章主要介紹了WebView啟動支付寶客戶端支付失敗的問題小結(jié)的相關(guān)資料,需要的朋友可以參考下
2017-01-01
JS閉包可被利用的常見場景小結(jié)
閉包的一個通常的用法是為一個在某一函數(shù)執(zhí)行前先執(zhí)行的函數(shù)提供參數(shù)。例如，在web環(huán)境中，一個函數(shù)作為setTimeout函數(shù)調(diào)用的第一個參數(shù)，是一種很常見的應(yīng)用
2017-04-04
js中cookie的添加、取值、刪除示例代碼
cookie的應(yīng)用在網(wǎng)頁中很常見，在本文為大家介紹下js中如何對cookie進(jìn)行添加、取值、刪除，感興趣的朋友不要錯過
2013-10-10
js 實(shí)現(xiàn)瀏覽歷史記錄示例
這篇文章主要介紹了如何使用js實(shí)現(xiàn)瀏覽歷史記錄,需要的朋友可以參考下
2014-04-04
微信小程序?qū)崿F(xiàn)滑動刪除
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
input輸入框的自動匹配(原生代碼)
功能要求:使用原生代碼實(shí)現(xiàn)，不可使用任何框架、只針對英文字符進(jìn)行匹配，并且匹配到的內(nèi)容在菜單中加粗、通過鍵盤上的上下箭頭可以對菜單進(jìn)行選擇等等，感興趣的你可以參考下
2013-03-03
原生JS中slice()方法和splice()區(qū)別
slice()方法和splice()方法都是原生js中對數(shù)組操作的方法。那么他兩種有什么區(qū)別呢？今天通過本文教程給大家簡單介紹下,需要的朋友可以參考下
2017-03-03
js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單
通過設(shè)置cookie來保存樹形菜單的狀態(tài)，在頁面加載時重新讀取cookie來設(shè)置菜單
2014-10-10