Nuxt.js 數(shù)據雙向綁定的實現(xiàn)
更新時間：2019年02月17日 11:03:01 作者：rirmk
這篇文章主要介紹了Nuxt.js 數(shù)據雙向綁定的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
假定我們有一個需求，一開始通過mounted()將一個字符串渲染在頁面上，但是我們經過操作后修改了數(shù)據并且需要將得到的結果重新異步渲染到頁面中去，而不是跳轉刷新頁面來重新渲染
首先模板中data()中定義數(shù)據，并且要將定義的數(shù)據顯示出來
<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ù)據
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
}
})
這里有個重點！
獲取頁面?zhèn)鬟^來的參數(shù)時必須使用結構賦值的方法獲取，不然獲取到的為一個Object，查詢將會出錯！
雙向綁定在這里的體現(xiàn)是：一開始通過mounted()將數(shù)據渲染到模板中，然后調用函數(shù)通過服務端的updateText接口改變數(shù)據，在updateText接口中更新完數(shù)據后，執(zhí)行一遍查詢，將查詢結果返回到觸發(fā)的函數(shù)中。并在該函數(shù)中修改data()中text的值達到數(shù)據雙向綁定的效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Jquery實現(xiàn)的tab效果可以指定默認顯示第幾頁
tab效果想必大家在網上都有見過很多吧，在本文將為大家介紹下如何實現(xiàn)可以在代碼里面指定默認顯示第幾頁的tab效果，感興趣的朋友不要錯過2013-10-10
今天無事逛網，突然發(fā)現(xiàn)了一個很有趣的事情，（也許只有我覺得有趣）.我看到一圖片竟然在我拖動滾動條的時候沒有動，也許你會說我少見多怪，不信你去找個這樣的我看看，很少有的，一般的都是一拖動圖片就在那跳得厲害。2010-01-01
這篇文章主要介紹了WebView啟動支付寶客戶端支付失敗的問題小結的相關資料,需要的朋友可以參考下2017-01-01
閉包的一個通常的用法是為一個在某一函數(shù)執(zhí)行前先執(zhí)行的函數(shù)提供參數(shù)。例如，在web環(huán)境中，一個函數(shù)作為setTimeout函數(shù)調用的第一個參數(shù)，是一種很常見的應用2017-04-04
cookie的應用在網頁中很常見，在本文為大家介紹下js中如何對cookie進行添加、取值、刪除，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了如何使用js實現(xiàn)瀏覽歷史記錄,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滑動刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
功能要求:使用原生代碼實現(xiàn)，不可使用任何框架、只針對英文字符進行匹配，并且匹配到的內容在菜單中加粗、通過鍵盤上的上下箭頭可以對菜單進行選擇等等，感興趣的你可以參考下2013-03-03
slice()方法和splice()方法都是原生js中對數(shù)組操作的方法。那么他兩種有什么區(qū)別呢？今天通過本文教程給大家簡單介紹下,需要的朋友可以參考下2017-03-03
通過設置cookie來保存樹形菜單的狀態(tài)，在頁面加載時重新讀取cookie來設置菜單2014-10-10