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

Question

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

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

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

text（文字输入）
selectedInput（当前选中的项目）

当前行为：

我已经更改，selectedInput 为空，这更新 Computed:filteredList 被触发。这是预期的。

第一个条件是确保此更新 return 的当前列表如果 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: update (1), 还有另一个值(selectedInput.text) input(text) 等于 (item.text) ]

这个循环一直有效，直到我在其他地方采取行动更新 selectedInput.text

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

Answer 1

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

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

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

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

vuejs Computed data detecting if model has been updated

javascript

immutability

vue.js