当数据库字段被更新后，如何在页面中更新？

Question

如图，当点击确定后，页面立马将增加的字段‘顶’显示出来？
wxml代码

<!-- 置顶弹窗 -->
<view class="pop-top">
    <view class="tan-bg" wx:if="{{show_input}}"></view>
    <view class="topcentent" wx:if="{{show_input}}">
        <view class="title">确定是否置顶</view>
        <view class="centent">置顶一个小时需要一元</view>
        <input class="input" type="number" value="{{code}}" bindinput="getCodeValue" placeholder="请输入置顶时长" />
        <view class="pop_btns">
            <view catch:tap="closeModal">取消</view>
            <view catch:tap="confirm">确定</view>
        </view>
    </view>
</view>

js代码：

// 点击确定
    async confirm(e){
        const that = this;
        const itmelength = that.data.code;
        const id = that.data.id;
        const wehicles = that.data.wehicles;
        console.log(id)
        wx.showLoading({
            title:"正在置顶中..."
        })
        await db.collection("wehicle").doc(id).update({
            data:{
                top:{
                    itmelength:itmelength,
                    pud_data:new Date(), 
                }
            }
        })
        .then(res => {
            console.log(res);
            // const updated = res.stats.updated;
            const top = that.data.wehicles;
            if(top){    
                wx.hideLoading();
                wx.showToast({
                    title:"恭喜！置顶成功！",
                })
                const newtop = [];
                if(wehicles.id.top){
                    newtop = wehicles.id.top;
                    that.setData({
                        top:newtop
                    })
                }
                setTimeout(function(){
                    that.setData({
                        show_input:false,
                        top:top
                      })
                },800)
            }else{
                wx.showToast({
                    title:"置顶失败，请重新置顶！",
                })
            }
        })
    }, 
 // 取消置顶
    showCancellation(e){
        console.log(e)
        const that = this;
        const id = e.currentTarget.dataset.id
        console.log(id)
        db.collection("wehicle").doc(id).update({
            data:{
                top:_.remove(),
            }
        }).then(res => {
            console.log(res);
        })
    },

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在您的微信小程序中，当数据库字段（例如关于置顶状态的数据）被更新后，要在页面中更新这些数据，一般有两种方法可以实现：一是利用微信小程序的数据绑定功能自动更新界面数据，二是使用定时任务或其他方法主动刷新页面数据。下面是具体的操作步骤和可能的解决方案：

方法一：使用微信小程序的数据绑定功能

微信小程序提供了数据绑定的功能，当数据发生变化时，页面会自动更新。您已经在代码中使用了 setData 方法来更新页面数据。确保您的数据库更新逻辑正确，并且当数据库更新后，相关的数据能够通过某种方式（如回调函数或事件）通知到小程序前端，进而触发 setData 方法更新页面数据。

例如，在您的 confirm 方法中，当数据库更新成功后，您已经使用 setData 方法更新了 top 数据和 show_input 状态，这会导致页面相关部分自动更新。

方法二：使用定时任务或事件刷新

如果您的页面数据不自动更新（例如由于网络延迟或其他原因），您可以考虑使用定时任务或监听某个事件来手动刷新页面数据。

定时任务

您可以设置一个定时器，定期从数据库获取数据并更新页面。但要注意避免过度频繁的请求和数据同步问题。

事件监听

您可以监听数据库的变化事件（如果数据库支持），当数据发生变化时，触发事件并更新页面。

关于代码的一些建议：

1. 确保 db.collection("wehicle").doc(id).update() 调用正确并且已经成功更新了数据库。
2. 在 confirm 方法中，当成功更新数据库后，您使用 setTimeout 来隐藏置顶弹窗，确保这个时间足够数据库操作完成。
3. 在 showCancellation 方法中，您尝试使用 _.remove() 来移除 top 字段，但这可能不是正确的用法。您可能需要更明确地指定如何更新这个字段。例如，设置 top 字段为一个空对象或特定的值。
4. 注意错误处理。当前代码只有成功的处理流程，没有错误处理机制。当数据库操作失败时，应该有一个明确的错误提示和处理方式。

总之，确保数据库更新逻辑正确，并且前端能够正确地响应数据库的变化。使用微信小程序的数据绑定功能通常就足够了，但如果遇到数据不同步的问题，可以考虑添加定时任务或事件刷新机制。