Vue 3排序- this.lists.sort不是一个函数
在Vue 3中，当我们使用this.lists.sort进行排序时，可能会遇到错误提示"this.lists.sort is not a function"。这个错误通常是由于this.lists不是一个数组类型引起的。
解决这个问题的方法是确保this.lists是一个数组，并且使用正确的排序函数。下面是一种可能的解决方案：
- 确保
this.lists是一个数组类型。可以通过在数据初始化时将其设置为一个空数组来确保它是一个数组，例如：data() { return { lists: [] } }。 - 确保
this.lists中的元素是可排序的。如果this.lists中的元素是对象类型，可以使用Array.sort()方法的比较函数来指定排序规则。比较函数应该返回一个负数、零或正数，表示两个元素的相对顺序。 - 例如，如果
this.lists是一个包含对象的数组，其中每个对象都有一个value属性，我们可以使用以下比较函数按照value属性进行排序： - 例如，如果
this.lists是一个包含对象的数组，其中每个对象都有一个value属性，我们可以使用以下比较函数按照value属性进行排序： - 这将按照
value属性的升序对this.lists进行排序。 - 确保在排序之前
this.lists已经被正确地初始化。在Vue中，可以使用生命周期钩子函数mounted来确保在组件渲染完成后再进行排序操作。 - 确保在排序之前
this.lists已经被正确地初始化。在Vue中，可以使用生命周期钩子函数mounted来确保在组件渲染完成后再进行排序操作。 - 这样可以确保在组件渲染完成后，
this.lists已经被正确地初始化，并且可以进行排序操作。
总结：
在Vue 3中，当遇到"this.lists.sort is not a function"错误时，需要确保this.lists是一个数组类型，并且使用正确的排序函数。同时，还需要确保在进行排序操作之前，this.lists已经被正确地初始化。
相关·内容
3回答
我试图用属性页对一个对象数组进行排序。这是在Vue的计算属性中完成的。
为此，我使用了以下函数，该函数首先构建对象：
sorted: function(){
var pages = this.selectedKKS['pages'];
var list;
try {
list = [];
Object.keys(pages).forEach(function(key){
console.log(key + " is the key")
var obj = {};
浏览 0提问于2017-06-07得票数 1
1回答
在Vue 2中，我曾经能够访问组件子组件上的属性(使用这个.$ref和动态分配的:ref在v-for循环中呈现)。
Vue 3中的相同代码失败，当我注销this.$refs时，对象是空的。
在这里，我想访问所有孩子的“isOrderable”属性。问题似乎在于:ref="product.id"是一个变量。如果我把它改为ref="foobar"，那么我就得到了this.$refs.foobar中的最后一个孩子。但是它vue2 me是一个包含所有子组件的数组。
<script>
import productItem from "./Pro
浏览 0提问于2021-03-21得票数 8
回答已采纳
4回答
我有和数组的对象，其元素是随机排序的。我想按(键的)特定顺序列出值。
例如，下面的迭代只列出了它们：
var vm = new Vue({
el: "#root",
data: {
all: [{
second: 2,
third: 3,
first: 1
},
{
third: 30,
first: 10,
second: 20
}
],
}
})
<script src="https://cdnjs
浏览 8提问于2017-06-01得票数 5
回答已采纳
4回答
如何在列表大写中显示项目？
、、、、
我试图在vue ( TODO ).Here中做一个简单的列表示例，我试图添加大写的过滤器(换句话说，所有的字母都是大写的).But，它显示了me错误
这是我的代码
var app = new Vue({
el: '#App',
data: {
message: '',
items: [{
name: "test1"
}, {
name: "test2"
}, {
name:
浏览 4提问于2017-09-02得票数 0
回答已采纳
我正在使用vuejs和 JavaScript库。可排序在<ul><li>中很好地工作，但是对于表行，当我按拖放重新排列时，它就会产生这个错误。
Sortable.min.js:3 Uncaught DOMException: Failed to execute 'matches' on 'Element': '>*' is not a valid selector.
我使用的是Vue.js v2.5.13和v1.7.0。
Vue.directive('sortable', {
inserted
浏览 2提问于2018-02-15得票数 4
回答已采纳
1回答
我的Vue应用程序使用从Firestore获取数据。
我从‘line’集合中导入数据，如下所示：
firestore() {
return {
lines: db.collection("lines")
}
}
每个记录都有一个Fi还原生成的id，然后我在v-for循环中使用一个键，如下所示：
<thead>
<tr>
<th>Code</th>
<th @click="sort_string(lines,'name')"> Name</th&g
浏览 4提问于2020-03-10得票数 0
回答已采纳
我已经注意到，在Vue2中，您可以将元素绑定到类的属性，并且当这个类属性从Vue世界之外的某个地方更改时，元素将更新，这在Vue3中似乎是不可能的。
我在这里创建了两个简单的例子来说明我的意思：
Vue2：
Vue3：
有一个类有一个内部定时器，它将增加类字段。在Vue2中，绑定到myClass.field的元素被正确更新，但是在Vue3中什么也不会发生。
我的问题是
1.为什么Vue2和Vue3在这里有区别？
2.如何在Vue3 ?中实现类似工作的Vue2示例
请注意，我不能在Vue生命周期方法中运行计时器。类字段需要自行更新。
下面是不起作用的Vue3代码：
HTML：
<div i
浏览 8提问于2021-12-01得票数 1
回答已采纳
5回答
在v-for循环中显示数组之前，如何按名称或性别对数组进行排序？
<div id="string">
<ul>
<li v-for="array in arrays">{{ array.name }}</li>
</ul>
</div>
// Vue.js v. 2.1.8
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano',
浏览 4提问于2017-03-19得票数 57
回答已采纳
1回答
我有这个代码。我需要按权重对mices数组进行排序，但它不适用于模板。我可以将sortBy函数传递给模板，以便按权重对数组进行排序-从小到大或按相反的顺序排序。我哪里错了？只有当我直接使用mices数组时，它才起作用。 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Mice Finder<
浏览 16提问于2020-09-18得票数 0
回答已采纳
我在Vue.js中创建了一个简单的表，其中显示了我的数据库中的所有数据，我想要有一个排序功能。
它应该会在我点击表格标题('Jenis Barang')时被触发。有可能吗？
这是C#中的服务：
(它从数据库获取所有数据)
public async Task<List<JenisBarangModel>> GetAllJenisBarang(int pageIndex, int itemPerPage, string filterByJenisBarang)
{
var query = this._timurRayaDbContext
浏览 2提问于2020-08-05得票数 0
我正在尝试在一个typescript单页应用程序中使用Vue，在该应用程序中，需要在屏幕上以列表的形式显示一系列数组，但需要按顺序显示。这似乎是一个简单而直接的问题，但我所举的例子似乎都不适用于Typescript。谁能给我一个实用的例子，告诉我如何让typescript从Vue数据中的数组中接受Vue计算函数？
我在Vue配置中创建了一个orderedRegions计算函数。这应该返回一个名为"Regions“的Vue数据对象的排序版本。预期的结果是ordredRegions将返回按字母顺序排序的相同列表。
computed: {
orderedRegions:
浏览 0提问于2019-07-17得票数 0
1回答
我在Vue.js中使用vue-good-table对象来呈现表格。我在服务器端使用分页和排序。 我的代码： <vue-good-table v-if="authorizations"
id="AuthorizationsTable"
ref="refToAuthorizationsTable"
@on-page-ch
浏览 13提问于2019-05-24得票数 0
回答已采纳
我正在尝试创建一个函数，它将以一种非常特殊的格式为我检索一些对象。下面是该函数的代码： pool.getConnection(function(err, connection) {
if (err) {
return res.status(500).json({
success: false,
data: err
});
}
connection.query("select cqq.* from coursequizquestions as cqq, coursequ
浏览 29提问于2021-06-17得票数 0
回答已采纳
1回答
我正在尝试将一个遗留应用程序从Vue 2转换为Vue 3。我对Vue不是很熟悉，我试图遵循他们在文档网站上提供的新迁移模板，但我遇到了一些问题。我没有收到任何JS控制台错误，但我的Vue代码不再呈现。
现有代码
<script>
var vm = new Vue({
el: "#app",
data: {
applications: []
},
created: function () {
console.log('Vue App Crea
浏览 5提问于2022-03-05得票数 0
回答已采纳
有了vue 2，我就可以
import Vue from "vue"
然后执行以下操作
if (!(myComponent instanceof Vue)) return
在Vue3中有什么方法可以做到吗？
浏览 5提问于2021-04-05得票数 5
回答已采纳
我是vue.js的新手。我有一个简单的index.vue，它试图连接到contentful并显示来自contentful的条目。我在index.vue中的代码如下所示：
<template>
<div>
<!-- render data of the person -->
<h1>{{ person.fields.name }}</h1>
<!-- render blog posts -->
<ul>
<li v-for="post in post
浏览 1提问于2019-01-17得票数 10
编辑:更多信息：
我有一个main-page.blde.php文件，其内容如下：
//main-page.blade.php where vue instance will mount
<div id="main-page" class=" bg-uoi-green">
<main-page :data=['one'] ></main-page>
</div>
还有一个main.js文件导入Vue的app.js文件，其中定义了主页面的实例(我已经安装了vue-加载程序和模板编译器)。
V
浏览 2提问于2021-02-20得票数 0
我找到了一些看起来很接近的答案，但无法让它们工作，所以如果有人有一个答案，如果这个答案是重复的，我很乐意去看看。我有一个对象数组，如下例所示：
<code>A0</code>
我用下面的代码创建了它：
<code>A1</code>
在第一段代码中，我能够根据需要将字符串解析到数组中。这并不重要，我只是想指出一个由for循环在某些字符串上创建的变量。
该数组在另一个函数中以"buildObjects“的形式使用push返回。我可以在为前端显示构建的buildObjects文件中访问它。我们使用Vue，但仅用于显示。我们拥有的查看器组合了输
浏览 21提问于2019-08-21得票数 0
vue js用属性对对象数组进行排序，并尝试用另一个属性对排序数组进行排序，但是Vue进入无限循环排序。
chatRoomArraySorted: function() {
console.log("func name chatRoomArraySorted");
function compare(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0
浏览 0提问于2018-11-26得票数 4
回答已采纳
1回答
为什么按钮总是隐藏着？
、、、、
<div class="app__land-bottom" v-if="isVisible">
<a href="#projects">
<img ref="arrowRef" id="arrow" src="./../assets/down.png" alt srcset />
</a>
</div>
在Vue3中，安装程序不起作用，但在Vue2上使用以下解决方案，用于不显示基于滚动的按钮。
VUE3
<script
浏览 3提问于2022-06-10得票数 1
我有一个问题的css编译顺序在Webpack 2与vue-cli项目。
在main.js中，我导入了一个名为skeleton.css的css库文件。这包括<a>颜色样式。
import Vue from 'vue'
import App from './App'
import router from './router'
import 'skeleton-css/css/skeleton.css'
在App.vue中，我按如下方式设置了<a>颜色
<style lang="scss"&
浏览 0提问于2017-04-26得票数 4
2回答
Vue排序数
、、
我有vue数据：
data: {
offices: requestData,
selectedFloors: [
"3",
"4",
"5",
"10",
"11",
"12",
],
minJobAngle: 0,
maxJobAngle: 80,
浏览 2提问于2021-11-12得票数 0
回答已采纳
2回答
我正在开发一个使用Vue.js 3和类型记录的单一页面应用程序。
此问题影响视图和单个文件组件。People.vue从后端检索数据，并使用v-for在多个PersonRow.vue组件中显示数据。尽管数据属性类型是显式定义的，但我在浏览器控制台中得到一个警告：
[Vue warn]: Invalid prop: Type check failed for prop "person". Expected Person, got Object
一切正常，我可以将PersonRow.vue中的属性类型更改为Object，以消除警告，但我希望类型检查能够正常工作。
People.vue
浏览 0提问于2020-10-12得票数 7
回答已采纳
2回答
我希望能够在我的vue项目中全局使用AOS库。 这是给Vue 2的。 new Vue({
created () {
AOS.init()
},
render: h => h(App),
}).$mount('#app'); Vue 3对应用的设置略有不同。 import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app') 我在Vue 3设置中没有那个creat
浏览 28提问于2021-07-11得票数 0
回答已采纳
3回答
我不确定为什么下面的代码会在计算机属性错误中产生意想不到的副作用。
错误：
✘ https://google.com/#q=vue%2Fno-side-effects-in-computed-properties Unexpected side effect in "orderMyReposByStars" computed property
src/components/HelloWorld.vue:84:14
return this.myRepos.sort((a, b) => a.stargazers_count &
浏览 3提问于2018-04-17得票数 18
我目前正在构建一个D3 Sunburst Vue组件，并为此使用npm包vue-d3-sunburst。这个包的文档可以在这里找到：
文档中说，有一个get-category-for-color函数，用于映射一个项目及其颜色，如：(nodeD3: Object) => category: Number | String By default use the node name
我完全有时间在这里，只是不知道如何得到每个节点的颜色值应用到每一条路径，我想知道是否有人可以帮助？
const {
sunburst,
highlightOnHover
} = window['
浏览 1提问于2021-11-17得票数 1
回答已采纳
1回答
我刚刚开始使用Vue.js做一个积分计数器应用程序，我遇到了v-for循环和下拉菜单的问题。
我的Vue.js应用程序中有一组播放器：
var app = new Vue({
el: '#leaderboard',
data: {
players: [{'name': 'Quentin', 'points': 0}, {'name': 'Kevin', 'points': 0}]
},
computed: {
order
浏览 3提问于2022-06-20得票数 0
我是Vue的新手，我正在努力学习如何使用它。
我想我被绊倒了，试图安装一个新的Vue应用程序。
以下是我能做的工作：
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({})
</script>
从那里，我可以安装它和正确地使用一切。
然而，这目前加载了一个旧版本的Vue (2.6.7)
我想了解最新版本(Vue 3)，所以我尝试导入包
<script src="https://unpkg.com/vue@next
浏览 4提问于2020-11-24得票数 8
回答已采纳
我想在interiajs应用程序(laravel9 + vue3)中使用vue-i18n (版本9.1)。由于在切换语言时需要做几件事，所以我需要外包在javascript部分中设置i18n语言环境。不幸的是，这是行不通的：
我已经尝试过使用$i18n.locale或this.$i18n.locale，但没有成功(错误消息:未定义$i18n /$i18n)。
我缺少在javascript中设置$i18n.locale的提示。
这是我的代码：
app.js i18n设置
require('./bootstrap');
import { createApp, h } from &
浏览 12提问于2022-06-08得票数 0
回答已采纳
我正在尝试设置我的vue.config.js文件，当我使用@vue/cli中的defineConfig方法时发现了这个问题。
TypeError: defineConfig不是一个函数
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer: {
port: 3001,
},
});
defineConfig是未定义的。我试图在cli-service文件夹中查找它，但是(假设)没有这样的方法。
浏览 26提问于2022-06-17得票数 1
回答已采纳
我有一个元素的array，但我想显示它，并提供一个可拖特性()，但只提供该array的一部分。
为此，我使用了原始数据数组中的计算属性，并将数组拆分为两个数组，我使用这些计算数组创建了一个列表，但当我拖动并试图重新排序拖动的列表时，似乎索引出现了问题，如下面的示例，如果试图拖动第一个列表，它不会重新排序，但第二个列表会重新排序。
那么我该如何解决这个问题呢？
new Vue({
el: '#app',
components: { draggable: window.vuedraggable },
data: () => {
return {
浏览 4提问于2021-03-06得票数 0
我有一个对象，它是一个数据集合。每件商品上都有-名称- date_created -价格
我可以让orderBy在Vue.js工作的名字和date_created，但它似乎不工作的价格。价格储存在浮子里。34.00，12.000.00等
我有什么特别的事要做吗？
我已经尝试将vue更新到最新版本，但仍然没有修复。
当我orderBy‘价格’它确实重新订购的项目，但不是以正确的方式。如下文所述，它目前订购了4个项目；
0.00
57.00
7.00
88.40
倒转这个顺序会做以上的事情，但相反。
谢谢有人能在这上面撒点光。
浏览 3提问于2015-08-31得票数 0
回答已采纳
1回答
我是在Nuxt 2.13通用模式，我有严重的内存使用和泄漏！！
因此，在寻找相关问题时，我在Nuxt 中找到了这样的信息：
不要使用Vue.use()、Vue.component()和全局，不要在此函数中插入任何用于Nuxt注入的Vue。它将导致服务器端的内存泄漏。
有人能告诉我那是什么意思吗？
我目前正在使用许多外部插件和一些由vue.component()和vue.use()在全球范围内添加的混合插件。他们可能是问题所在吗？(我还有一个utils.js混合文件，其中包括许多方法和计算数据，这些方法和计算数据都是全局添加到nuxt.config中的)
我在nuxt.config.js
浏览 4提问于2021-03-27得票数 0
回答已采纳
我使用vue3-Simpl-html2pdf。
<vue3-simple-html2pdf ref="vue3SimpleHtml2pdf" :options="pdfOptions" :filename="exportFilename">
<div class="main-content">
<h1>PDF</h1>
</div>
</vue3-simple-html2pdf>
<button @click="d
浏览 9提问于2022-10-25得票数 1
回答已采纳
2回答
我有以下Vue方法，需要将JS .sort()添加到其中，以便按字母顺序排序输出。我首先学习了JS向后学习框架，并且很难理解我需要如何使这个工作成为JS智能的：
filteredByCat (cat) {
return this.businesses.filter((element) => {
return element.cat === cat.name
})
},
不知为什么我需要这样的东西：
filteredByCat (cat) {
return this.businesses.filter((element) => {
return (elem
浏览 3提问于2017-06-12得票数 0
回答已采纳
我试图在Vue.js中绑定一个可排序列表，但是底层数据列表没有更新：
Vue.component('lessons', {
template: "#lessons-template",
data: function() {
return {
list: ['Item 1', 'Item 2', 'Item 3']
};
},
methods: {
onChange: function(evt) {
console.log(this.list);
浏览 1提问于2016-05-30得票数 2
回答已采纳
在vue中，为什么最好使用:to="{ name: 'home'}"而不是简单地使用to:="/"
<template>
<h1>Vue 2:</h1>
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'home'}">Home</router-link>
<router-view/>
</tem
浏览 7提问于2022-10-30得票数 2
回答已采纳
我有一个使用Vue 3、class-component和typescript的项目，我在App.vue文件中找到了语法@Option <template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
name: "App
浏览 555提问于2021-04-14得票数 11
1回答
在两个Vue项目上，我得到了来自构建上的迷你css-提取插件的一个相互冲突的订单警告。下面是其中一个警告的示例：
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/vue2-datepicker/index.css
despite it was not able to fulfill
浏览 3提问于2020-10-27得票数 1
2回答
我想知道如何在vue中使用过滤器。
我知道计算机，当我使用它的时候，但我的问题是
我使用这段代码对水果数组进行排序，而不是使用computed
<li v-for="fruit in fruits.sort() ">{{fruit }}</li>
它运行了，我得到了正确的结果
但是控制台通知我有错误
[Vue warn]: You may have an infinite update loop in a component render function.
(found in <MyFilter> at C:\xampp\htdocs\p
浏览 2提问于2017-04-24得票数 7
回答已采纳
我刚刚开始学习Vue 3，我正在尝试创建一个绑定到JavaScript数组** (在Vue外部定义和修改)**的Vue组件，并使用该数组来呈现子Vue组件的v-for列表。
在下面的代码中，我的"layer-container“Vue组件具有一个模板，该模板使用来自JavaScript数组layersGlobal的数据呈现"layer-item”子组件列表。如果运行它，可以看到从数组中的初始数据正确呈现项，但是当数组被更新时(1秒后，通过setInterval()中的一个setInterval()调用)，列表不会被重命名，DOM也不会被更新。
<html>
&
浏览 1提问于2022-02-12得票数 0
回答已采纳
1回答
在VUE中，可以在属性中编写完整的JS表达式。例如，对于下面的<div>，
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', num: 3 } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="message
浏览 0提问于2020-10-09得票数 2
回答已采纳
我在中使用Webpacker (需要导入vue.esm.js)。我想测试我的vuex突变，如描述的。它在我使用import Vue from 'vue‘时起作用，但当我使用import Vue from 'vue/dist/vue.esm'时就不起作用了。然而，如果我不在商店里使用vue.esm，我的Webpacker应用程序就会中断。
这是我的店：
// store.js
import Vue from 'vue/dist/vue.esm' // changing this to import from 'vue' works
impo
浏览 4提问于2017-12-15得票数 5
回答已采纳
3回答
我在Vue上有一个数组，它包含3个对象，分别是name和rate，还有一个按rate排序的函数：
methods: {
sortByRate() {
this.complejos = this.complejos.sort(function(a, b) { return a.rate - b.rate });
}
}
我现在需要的是一个功能，按最后添加的排序，即，排序的项目，因为他们。
小提琴：
浏览 0提问于2020-05-07得票数 1
2回答
我使用TypeScript创建了一个Vue 3应用程序。在src文件夹中，我创建了一个新的enum color.ts
enum Color {
Red,
Blue
}
export default Color;
我创建了一个组件ColorDisplay.vue
<template>
<div>
{{ color }}
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
浏览 3提问于2021-10-07得票数 4
回答已采纳
目前，我使用以下命令在Vue.js / Buefy表单中显示每个城市的酒店列表：
<option
:value="h['@attributes'].Name"
v-for="h in cities[form.cities[i].index].Hotels.Hotel"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h[&
浏览 1提问于2018-05-23得票数 0
1回答
为什么这不更新商店d3状态？
<script>
import HorizontalLinearityGraph from "@/components/HorizontalLinearityGraph";
export default {
components: {HorizontalLinearityGraph},
data: () => ({
model: null,
d1:[25,50,75,100,125,150,175,200,225,250],
d2:[50,75,100,125,150,175,200,225,250
浏览 2提问于2022-02-07得票数 1
我试图在Vue框架中使用使用firebase的google签名。我不知道这是什么错误--任何人都能帮我这个忙。
vue.runtime.esm.js?2b0e:1888 TypeError: _firebase_js__WEBPACK_IMPORTED_MODULE_2__.fb.auth.GoogleAuthProvider is not a constructor
at VueComponent.socialLogin (Signin.vue?3d55:76)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTML
浏览 10提问于2020-10-14得票数 3
回答已采纳
我正在创建一个VueJS应用程序。我有一个子组件，Child.vue，它将数据从父组件传递给它。
Child.vue
export default{
props:['info'],
data: function(){
return{
timeValue:{
minutes: '',
hours: ''
}
}
},
created: function(){
浏览 1提问于2017-11-28得票数 5
回答已采纳
我刚刚使用以下命令用vue cli 3创建了一个vue项目： vue create hello-world 现在，我想使用Node.js (this one)的util模块，但是当我使用下面的代码时，vue.js加载他自己的模块。我想加载原始的node.js util模块。 <template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome t
浏览 119提问于2019-01-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
