计算属性中的多个返回答案

【问题标题】：multiple returns in a computed property计算属性中的多个返回
【发布时间】：2018-10-13 04:02:57
【问题描述】：

我正在尝试在计算属性中设置多个返回。不知道为什么这不起作用。我还尝试重新利用箭头功能。我在这里尝试做的是，当应用程序加载触发“附近”方法时，该方法会进行一些过滤并触发 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>

【问题讨论】：

标签： vue.js computed-properties

【解决方案1】：

一个函数只会返回一次，所以不确定你在用sortedItems做什么。

您永远不会负责自己运行nearby。每当items 更改时，nearby 就会运行。您可以做的是拥有一个 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"`.

【讨论】：

看来您期待的不止一个，所以 results 将是一个数组。你需要像<span v-for="result in results">{{ result.status }}</span>一样做。