vue.js - 计算属性中的多个返回
问题描述
我正在尝试在计算属性中设置多个返回。不知道为什么这不起作用。我还尝试重新利用箭头功能。我在这里尝试做的是,当应用程序加载触发“附近”方法时,该方法会进行一些过滤并触发 sortedItems 方法。我试着移动东西,但它坏了。是否可以在 userFilterkey:['nearby', 'someFunc'] 中调用这两者。我以为它会很酷,但不起作用。我基本上只需要在加载时触发附近和 sortedItems。
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<button v-on:click="userFilterKey='nearby'" :class="{active: userFilterKey == 'nearby'}">Show Completed Tasks</button><br><br>
<div class="panel panel-default" v-for="item in sortedItems">
<div class="panel-heading">Tracking ID#{{item.TrackingID}} <span class="pull-right"><small>last modified</small> {{item.Modified | date}} | <small>Created</small> {{item.Created | date}}</span>
</div>
<span class="pull-right" style="padding-bottom:10px;">status <strong>{{item.status}}</strong></span>
</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
items: [],
userFilterKey:'nearby',
Title: ""
},
created: function() {
this.getData();
},
computed: {
sortedItems: function() {
return this[this.userFilterKey]
return this.items.sort((b, a) => new Date(a.Modified) - new Date(b.Modified));
},
itemFilter: function(){
return this[this.userFilterKey]
},
all: function(){
return this.items
},
nearby: function(){
alert("this")
return this.items.filter((items) => items.status=="New" | items.status=="in-progress")
}
},
filters: {
date: function(str) {
if (!str) {
return '(n/a)';
}
str = new Date(str);
return ((str.getMonth() < 9) ? '0' : '') + (str.getMonth() + 1) + '/' +
((str.getDate() < 10) ? '0' : '') + str.getDate() + '/' + str.getFullYear();
}
},
methods: {
getData: function() {
var root = 'https://example.com';
var headers = {
accept: "application/json;odata=verbose"
}
var vm = this;
$.ajax({
url: root + "_api/web/lists/getbytitle('Issues')/items?&$orderby=Created desc",
type: 'Get',
headers: headers,
success: function(data) {
vm.items = data.d.results;
console.log(vm.items)
}
})
}
}
})
</script>
</body>
解决方案
一个函数只会得到一个返回,所以不确定你在做什么sortedItems
。
你永远不会对自己负责nearby
。nearby
每当items
变化时运行。您可以做的是拥有一个results
计算属性并执行以下操作:
computed: {
results () {
return this.items
.filter(...)
.sort(...)
},
},
并results
在您的模板中使用。
还:
items.status=="New" | items.status=="in-progress"
应该:
items.status=="New" || items.status=="in-progress"
甚至更好:
items.status === "New" || items.status === "in-progress"`.
推荐阅读
- json - 如何按属性值过滤 ARM 模板输出?
- api - 如何正确添加查询参数——颤振
- python - 将高分辨率底部地形添加到 Cartopy 地图
- cmake - Clion 失败并收到 clang:错误:链接器命令失败,退出代码为 1,但它使用 clang++ 工作
- amazon-web-services - 无法将文件从本地推送到 s3
- typescript - 可选类型别名的交集
- python - Python 中的 MQTT on_message 超时
- swift - 如何从我的项目 SwiftUI 启动谷歌地图
- wso2 - 如何在 WSO2 API Manager 中配置 Key 配置(即:Token Endpoint 和 Revoke Endpoint)
- typescript - 未生成导入的类型