vuejs 计算数据检测模型是否已更新答案

【问题标题】：vuejs Computed data detecting if model has been updatedvuejs 计算数据检测模型是否已更新
【发布时间】：2018-08-17 12:28:38
【问题描述】：

我正在尝试检测 Vue 计算数据中的模型数据是否未更改。

我有两组变量需要检查， before Computed:filteredItems 应该返回一个新列表或当前列表。

以下是我正在检查的两个数据

文本（文本输入）
selectedInput（当前选中项）

当前行为：

我已将 selectedInput 更改为 null，这会更新 Computed:filteredList 以被触发。这是预期的。

第一个条件是确保此更新返回当前列表如果 text === selectedInput.text，按预期工作

但是，我需要第二个条件来检测 text 是否未被更改。

<input v-model="text" />
<ul>
   <li v-for="item in filteredItems" @click="text=item.text"></li>
</ul>

{
  data():{
     text: 1,
     items: [],
     tempList: [],
     selectedItem: {text: 1}
  },
  computed: {
     filteredItems(){
        // when selectedItem.text === current text input, do not run
        if (this.selectedItem.text === text) return this.tempList;

        // how do i detect if selectedItem.text has not been changed
        if (this.selectedItem.text.hasNotChange??) return this.tempList;
     }
  }
}

数据流：1更新文本> 2过滤列表> 3点击listItem，更新（1）文本

[输入（文本）：更新类型] >
[li(filteredItem): 按值（文本）和（selectedInput.text）按类型过滤列表] >
[li(item)@click: 更新(1)，还有另一个值(selectedInput.text) 输入(text) 等于(item.text)]

这个循环一直有效，直到我在其他地方有更新 selectedInput.text 的操作

我可以用 Text 模型的 setter/getter 做些什么吗？

【问题讨论】：

我可以知道为什么吗？如果它没有改变，你会怎么做？如果它没有改变，计算的 setter 甚至不会被触发。你想要的可能是watch
保存文本的原始值并与之比较文本。
@JacobGoh，如果 FIRST 值没有改变，我会返回当前的临时列表。我在使用 Watch 时遇到了另一个问题。我正在做一些棘手的双向绑定类型的事情。它依赖于两个变量
@RoyJ，是的，我正在尝试使用 setter/getter，看看我是否可以制作“文本”模型的 temporayCopy 以进行比较。如果它正在工作，将发布结果
您是否考虑过使用观察者而不是计算者？

标签： javascript vue.js immutability

【解决方案1】：

创建一个变量changed。观看selectedItem.text，并将changed 设置为true。在text 上的观察者中，将changed 设置为false。

【讨论】：

【解决方案2】：

我使用临时变量让它工作

data(){
   return: {
      text: "",
      temp: {
         text
      }
   }
}

computed(){
   filteredList(){
       var temporaryList,originalList,filteredList


       if ((this.text === $store.state.selectedText )||
           (this.text === this.temp.text ) ) {
                return temporaryList || originalList
           }

       // update
       this.temp.text = this.text

       return filteredList
   }
}

认为在 Computed 方法中更新变量是一种不好的做法。

【讨论】：