时间戳

首页 > 解决方案 > 排序计算值和更新计算值vue

javascript - 排序计算值和更新计算值vue

问题描述

在我的 vue 应用程序中，我从我的 API 中获取了一些 JSON，然后我计算返回的数据并通过它的一个属性对其进行排序，然后我想在客户端每次更新该属性时都使用它，我想将 `v-model="tag.weight" 添加到输入中就足够了，但显然不是？我做错了什么？

<div class="mt-6" v-if="this.sortedTags">
        <div class="w-full flex justify-between pb-2 border-white">
            <div class="w-1/3 p-4 font-black">Tag</div>
            <div class="p-4 font-black">Active</div>
            <div class="p-4 font-black">Weight</div>
        </div>
        <div class="w-full flex justify-between" v-for="tag in this.sortedTags" :key="tag.id">
            <div class="w-1/3 p-4">{{ tag.tag }}</div>
            <div class="p-4"><input type="checkbox" /></div>
            <div class="p-4"><input type="text" v-model="tag.weight" size="3" class="text-black"/></div>
        </div>
    </div>


computed: {
    ...mapState(['admin']),
    sortedTags() {
        return this.admin.tags.sort(function(a, b) {
            a.weight - b.weight;
        });
    }
}

我希望的是 1）如果在绑定的权重字段中输入一个数字，tag.weight它将根据该输入对其进行排序，以及 2）当我向数据添加新对象时，它会使用它。

标签： javascriptjsonvue.js

解决方案

省略 时我得到了类似的结果return，它会给你响应，但重新排序将不起作用。因此，只需使用return a.weight - b.weight;而不是简单的a.weight - b.weight;

详解：https ://stackoverflow.com/a/38159151/3256489

推荐阅读