Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
假定我們有一個(gè)需求,一開始通過mounted()將一個(gè)字符串渲染在頁(yè)面上,但是我們經(jīng)過操作后修改了數(shù)據(jù)并且需要將得到的結(jié)果重新異步渲染到頁(yè)面中去,而不是跳轉(zhuǎn)刷新頁(yè)面來重新渲染
首先模板中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ù)來獲取后臺(tái)的數(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 } })
這里有個(gè)重點(diǎn)!
獲取頁(yè)面?zhèn)鬟^來的參數(shù)時(shí)必須使用結(jié)構(gòu)賦值的方法獲取,不然獲取到的為一個(gè)Object,查詢將會(huì)出錯(cuò)!
雙向綁定在這里的體現(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ù)雙向綁定的效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
- Vue.js單向綁定和雙向綁定實(shí)例分析
- Vue.js 踩坑記之雙向綁定
- js最簡(jiǎn)單的雙向綁定實(shí)例講解
- JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
- AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解
- jquery,js簡(jiǎn)單實(shí)現(xiàn)類似Angular.js雙向綁定
- 使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定
- 輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
JS編寫函數(shù)實(shí)現(xiàn)對(duì)身份證號(hào)碼最后一位的驗(yàn)證功能
二代身份證號(hào)碼為18位,怎么編寫函數(shù)實(shí)現(xiàn)對(duì)身份證號(hào)碼最后一位的驗(yàn)證功能呢?今天小編通過代碼給大家分享下實(shí)現(xiàn)方法2016-12-12微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JSON字符串和JSON對(duì)象相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了JSON字符串和JSON對(duì)象相互轉(zhuǎn)化方法,結(jié)合實(shí)例形式詳細(xì)分析了json對(duì)象與字符串的功能、使用、轉(zhuǎn)換方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01前端彈出對(duì)話框 js實(shí)現(xiàn)ajax交互
這篇文章主要為大家詳細(xì)介紹了前端彈出對(duì)話框,js實(shí)現(xiàn)ajax交互,感興趣的小伙伴們可以參考一下2016-09-09jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新(附源碼)
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新的具體實(shí)例,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果,導(dǎo)航可左右滑動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07