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

Question

我有一个传单项目，我正在使用 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”，并渲染坐标。 setter 根据用户输入更改坐标。使用 centerPointLat 作为输入的 HTML-block 如下。

<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">°</span> </md-field> </div>

最新的两个代码块与前两个代码块大致相同，唯一的变化是 cancelChangePoints 是 true 还是 false，并且 cancelChangePoints 在与取消按钮关联的 @click 事件上发生了变化。

问题在于，尽管 cancelChangePoints 为真，并且呈现了最新的 HTML-block（这也可以通过读取 Latitude 原始标签来验证），但呈现了更改后的值 (69.742215) ) 和 NOT 67.742215，它应该来自计算的属性 centerPointLatOriginal。同样令人震惊的是，当我使用Vue开发工具调查这个元素（原始纬度）时，该值确实是67.742215！

有没有人经历过类似的行为并对如何解决这个问题有建议？我已经 10 岁了，一直在努力解决这个问题。

Answer 1

将 :key 分配给第二个 HTML 元素解决了问题：

<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>

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

Vue.js computed property showing wrong data

javascript

html

vue.js

computed-properties

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

Vue.js computed property showing wrong data

javascript

html

vue.js

computed-properties

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