Question

我正在尝试在计算属性中设置多个返回。不知道为什么这不起作用。我也试过重新调整箭头功能。我在这里尝试做的是，当应用程序加载触发附近的＆＃39;进行一些过滤并触发sortedItems方法的方法。我尝试过移动的东西，但它打破了。是否可以在userFilterkey中调用这两个：[＆＃39; near＆＃39;，＆＃39; someFunc＆＃39;]。我觉得这很酷，但不起作用。我基本上只需要在加载时触发near和sortedItems。

＆＃13;

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

＆＃13;

Answer 1

一个函数只会返回一个返回值，因此不确定您使用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"`.

计算属性中的多个返回

1 个答案: