Множественные возвраты в вычисляемом свойстве

Я пытаюсь настроить несколько возвратов в вычисляемом свойстве. Не уверен, почему это не работает. Я также попытался переназначить функцию стрелки. То, что я пытаюсь сделать здесь, - это когда приложения загружают метод "поблизости", который выполняет небольшую фильтрацию, а также метод sortedItems. Я пытался переместить вещи вокруг, но это ломается. Можно ли вызвать оба из них в userFilterkey:['near', 'someFunc']. Я думал, что это будет круто, но не работает. Мне в основном просто нужно вызвать рядом и сортировать элементы по нагрузке.

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

Источник

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"`.
Источник
Другие вопросы по тегам