根据输入事件更新Vuejs中的数据属性

Question

我有一个过滤数据的搜索输入。过滤后的数据意味着重新呈现我的页面，以便原始属性(shifts)现在将具有过滤后的数据，这意味着搜索输入中的任何更改都应该更新我的数据对象。下面的代码片段可以完美地工作，因此当我监视日志变量filteredData时，我可以看到它返回预期的数据。当我输入搜索时，数据按预期过滤，当我清除搜索时，对象包含原始shifts属性中的数据。

当我将这个过滤的数据分配给我的原始对象即this.shifts=filteredData时，就会发生问题。当我这样做时，shifts属性将包含过滤的数据，但是当我清除搜索时，先前过滤的数据仍将被分配，这意味着shifts属性没有被正确更新。我不知道为什么会这样。

new Vue({
el: "#app",
data: {
search_input: '',
shifts: {"John":[{"user_id":193,"shift_hours":0}],"Rose":[{"user_id":194,"shift_hours":0}]},
},

methods: {
searchInput() {
const filteredData = Object.keys(this.shifts).reduce(
(obj, key) => {
if (
key.toLowerCase().includes(this.search_input.toLowerCase())
) {
obj[key] = this.shifts[key];
}
return obj;
},
{}
);
console.log(filteredData);
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="search_input" @input.prevent="searchInput" type="text"/>
</div>

我在下面附加了一个额外的代码片段来展示我面临的问题:

new Vue({
el: "#app",
data: {
search_input: '',
shifts: {"John":[{"user_id":193,"shift_hours":0}],"Rose":[{"user_id":194,"shift_hours":0}]},
},

methods: {
searchInput() {
const filteredData = Object.keys(this.shifts).reduce(
(obj, key) => {
if (key.toLowerCase().includes(this.search_input.toLowerCase())) {
obj[key] = this.shifts[key];
}
return obj;
},
{}
);
this.shifts = filteredData;
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="search_input" @input.prevent="searchInput" type="text" />
<pre>{{ shifts }}</pre>
</div>

Answer 1

数据需要是一个函数，您可以使用computed属性进行过滤:

new Vue({
el: "#app",
data() {
return {
search_input: '',
shifts: {"John": [{"user_id": 193, "shift_hours": 0}], "Rose": [{"user_id": 194, "shift_hours": 0}]},
}
},
computed: {
searchInput() {
return Object.keys(this.shifts).reduce((obj, key) => {
if (key.toLowerCase().includes(this.search_input.toLowerCase())) {
obj[key] = this.shifts[key]
}
return obj
}, {} )
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="search_input" type="text" />
<pre>{{ searchInput }}</pre>
</div>