Vue.js 计算属性显示错误数据答案

【问题标题】：Vue.js computed property showing wrong dataVue.js 计算属性显示错误数据
【发布时间】：2022-01-14 10:16:22
【问题描述】：

我有一个传单项目，我正在使用 Vue 计算属性来显示图层的坐标。我正在实现直接在呈现原始坐标的块中编辑坐标的功能，如下所示：

最初呈现坐标（仅纬度）的代码如下所示：

            centerPointLat: {
            get() {
                const latitudeToRenderInDOM = this.useDDM
                    ? this.DDMlat(this.currLeafletShapeCenterPoint.lat)
                    : this.currLeafletShapeCenterPoint.lat
                return latitudeToRenderInDOM
            },
            set(v) {
                if (this.useDDM) {
                    const ddm = this.DDfromDDM(v)
                    this.modifiedLatValid = !!ddm || ddm === 0
                    this.modifiedLat = ddm || this.modifiedLat
                } else {
                    this.modifiedLatValid = !!v || v === 0
                    this.modifiedLat = parseFloat(v)
                }
            },

getter 从父级读取道具“currLeafletShapeCenterPoint.lat”，并渲染坐标。设置器根据用户的输入更改坐标。下面是使用 centerPointLat 作为输入的 HTML 块。

<div v-if="!cancelChangePoints">
    <md-field>
        <label>Latitude</label>
        <md-input v-model="centerPointLat" style="text-align: right" />
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>

在用户按下“编辑坐标”后，会呈现两个新按钮，保存和取消，并且 HTML 输入字段是可编辑的（默认情况下在编辑坐标之前禁用）。

到目前为止一切顺利。用户现在决定将输入更改为 69.742215，但认为该值是错误的，并按下“取消”按钮。在这种情况下，我希望显示原始值，并且我有第二个计算属性来获取原始值：

centerPointLatOriginal: {
                get() {
                    const latitudeToRenderInDOMOriginal = this.useDDM
                        ? this.DDMlat(this.currLeafletShapeCenterPoint.lat)
                        : this.currLeafletShapeCenterPoint.lat
                    return latitudeToRenderInDOMOriginal
                },
                set(v) {},
            },

第二个块在取消后呈现原始值。 HTML 代码：

<div v-if="cancelChangePoints">
    <md-field>
        <label>Latitude original</label>
        <md-input v-model="centerPointLatOriginal" style="text-align: right" />
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>

最新的两个代码块或多或少与前两个相同，唯一的变化是cancelChangePoints 是真还是假，并且cancelChangePoints 在与取消按钮关联的@click 事件上发生变化。

问题是，虽然 cancelChangePoints 为真，并且渲染了最新的 HTML 块（这也可以通过读取标签来验证，这是 Latitude 原始的），但渲染了更改的值（69.742215），并且不是 67.742215，它应该来自计算的属性centerPointLatOriginal。同样令人震惊的是，当我使用 Vue 开发工具调查这个元素（原始纬度）时，该值确实是 67.742215！

有没有人遇到过类似的行为并对如何解决此问题提出建议？我已经老了 10 岁，试图解决这个问题。

【问题讨论】：

你应该明白 Vue 计算字段不是黑魔法。他们需要知道正确的依赖关系，并且这些依赖关系应该是可观察的。读取和写入相同计算字段的不同位置的值，在计算函数中使用外部变量，然后抱怨事情没有按预期工作是没有帮助的。
我不明白您的评论，但是将 :key 分配给第二个 html 元素，然后在按下取消按钮时增加此键可以解决问题。

标签： javascript html vue.js computed-properties

【解决方案1】：

为第二个 HTML 元素分配一个 :key 解决了这个问题：

<div v-if="cancelChangePoints" :key="forceReRender">
    <md-field>
         <label>Latitude original</label>
         <md-input
          v-if="cancelChangePoints"
          v-model="centerPointLatOriginal"
          style="text-align: right"/>
        <span class="md-suffix" v-if="!useDDM">&deg;</span>
    </md-field>
</div>

【讨论】：