如何在Vue.js应用程序中使用数据对象的本地版本？
我的问题可能更多的是关于语义，以及如何实际提出这个问题并搜索更好的答案，因为我甚至不知道要搜索的正确术语。所以开始吧..。
在我的vue代码中，我对后端api进行了调用，它返回一个json blob，其中包含我希望在ui中使用的数据块。这没什么问题。但是，我需要稍微修改一下数据，以便将其呈现给用户。然后，我在网格/表格中将其呈现给用户。我希望用户能够排序和搜索的领域以及。因此，我可能会显示一个来自后端的名为fullName的字段，但允许用户对实际不在网格中的名为lastName的字段进行排序。
话虽如此，这里是我的问题--我是否应该在代码中创建一个单一的'transformer/reducer‘来将来自api的数据对象转换为ui所需的数据对象？或者我应该编写多个过滤器(这里我指的是直接在html中使用'|‘管道的Vue.js过滤器)，以便直接修改html模板中的字段？
一般来说，我想我的问题可以归结为“我如何在本地处理api响应对象，以便我可以保持它的‘纯度’？”或者其他类似的东西。为此，我道歉，任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2019-06-11 23:46:26
我想我现在明白你的要求了。您只想知道在使响应可供UI使用之前是否需要修改响应。假设您使用的是axios。我在Vue中要做的是使用response.data对象作为数据注入到vue的data属性中。例如，您的response.data返回一个对象数组。在Vue中硬编码一个数据变量，如下所示：
data () {
return {
apiData: []
}
}使用API响应，像这样设置数据数组：
const response = await axios.get(...);
this.apiData = response.data.filter(item => return item.foo === bar);现在，apiData保存了响应数据的过滤版本，这些数据被异步检索以进行处理，包括每个对象的ObjectId。注意:我会在created(){}钩子期间调用此函数，以便在DOM mounting.You可以通过UI中的ObjectID引用数组对象之前有时间处理GET请求，如下所示：
<div v-for="item in apiData" :key='item_id' :item="item">
<p> {{item.whateverProperty}} </p>
</div>https://stackoverflow.com/questions/56545817
复制相似问题
腾讯云开发者
