Nuxt.js 數(shù)據(jù)雙向綁定的實現(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 } })
這里有個重點!
獲取頁面?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í)有所幫助,也希望大家多多支持腳本之家。
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實例分析
- Vue.js單向綁定和雙向綁定實例分析
- Vue.js 踩坑記之雙向綁定
- js最簡單的雙向綁定實例講解
- JS原生數(shù)據(jù)雙向綁定實現(xiàn)代碼
- AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解
- jquery,js簡單實現(xiàn)類似Angular.js雙向綁定
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- 輕松實現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
JS編寫函數(shù)實現(xiàn)對身份證號碼最后一位的驗證功能
二代身份證號碼為18位,怎么編寫函數(shù)實現(xiàn)對身份證號碼最后一位的驗證功能呢?今天小編通過代碼給大家分享下實現(xiàn)方法2016-12-12jquery自定義插件結(jié)合baiduTemplate.js實現(xiàn)異步刷新(附源碼)
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實現(xiàn)異步刷新的具體實例,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12