vuejs 计算数据检测模型是不是已更新

Posted 2023-02-16

【中文标题】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 以进行比较。如果它正在工作，将发布结果

您是否考虑过使用观察者而不是计算者？

【参考方案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 方法中更新变量是一种不好的做法。