共计 960 个字符，预计需要花费 3 分钟才能阅读完成。
假定我们有一个需求，一开始通过 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 的值达到数据双向绑定的效果