Vue 2 v-for multiple orderby

时间:2017-04-05 13:39:58

标签: jquery vue.js vuejs2

我需要帮助使用密钥订购数组:' updated_at'和" order_at,现在代码搜索和反转,但我无法将它命令,你可以在这里看到一个jsfiddle:任何人都可以帮助我,这里是正确代码的一部分

感谢任何帮助

    data: {
        items: array goes here,
        searchObj: {
            msgText: '',
            desc_en: '',
            created_at: '',
            updated_at: '',
            sort: false
        },
        sortKey: 'updated_at'
    },

    filters: {
        formatDate: function (date_data) {
            moment.locale('{{$user->lang}}');
            return moment(date_data).format('lll') + ' EST';
        }
    },

    methods: {
        orderBy: function (data) {
            alert(data);
        }
    },
    computed: {
        itemsWithFilter: function () {
            var that = this;
            return that.items
            .filter(function (item) {
                if(item.desc_en) {
                    results = item.name_en.toLowerCase().indexOf(that.searchObj.msgText.toLowerCase()) > -1;
                    results2 = item.desc_en.toLowerCase().indexOf(that.searchObj.msgText.toLowerCase()) > -1;
                    return results + results2;
                }
            })
            .sort(function (a, b) {
                if (that.searchObj.sort)
                    return a[that.sortKey] > b[that.sortKey] ? 1 : -1;
                else
                    return a[that.sortKey] > b[that.sortKey] ? -1 : 1;
            })
        }
    }

1 个答案:

答案 0 :(得分:2)

您希望单选按钮为sortKey建模,以便在选择单选按钮时重新计算messagesWithFilter

<input type="radio" name="orderBy" v-model="sortKey" id="normal" value="message" checked="checked"><label for="normal">orderBy normal (this should be auto selected on load)
<br>
<input type="radio" name="orderBy" v-model="sortKey" id="created_at" value="created_at"><label for="created_at">orderBy created_at
<br>
<input type="radio" name="orderBy" v-model="sortKey" id="updated_at" value="updated_at"><label for="updated_at">orderBy updated_at