首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(this.internalValue || [])在v-select上启用多选时,.findIndex不是函数

(this.internalValue || [])在v-select上启用多选时,.findIndex不是函数是因为(this.internalValue || [])返回的是一个数组,而数组没有findIndex方法。

在v-select组件中,当启用多选时,可以通过设置multiple属性来实现。当用户选择多个选项时,v-select会将选中的值存储在(this.internalValue || [])中,以数组的形式保存。

而在JavaScript中,数组是一种特殊的对象,它具有一些内置的方法,如push、pop、slice等。但是,并没有名为findIndex的内置方法。

如果想要在多选的情况下找到某个值在数组中的索引,可以使用Array.prototype.indexOf方法。该方法会返回指定值在数组中的第一个匹配项的索引,如果没有找到则返回-1。

示例代码如下:

代码语言:txt
复制
let index = (this.internalValue || []).indexOf(value);

其中,value为要查找的值。

需要注意的是,如果使用indexOf方法进行查找时,需要确保数组中的元素是基本类型,而不是对象类型。如果数组中的元素是对象类型,那么indexOf方法将无法正确判断两个对象是否相等,因为它是通过比较引用地址来判断的。

如果需要根据对象的某个属性值来查找索引,可以使用Array.prototype.findIndex方法。该方法接受一个回调函数作为参数,用于判断数组中的每个元素是否满足某个条件,如果满足则返回该元素的索引,如果没有找到则返回-1。

示例代码如下:

代码语言:txt
复制
let index = (this.internalValue || []).findIndex(item => item.id === value.id);

其中,item为数组中的每个元素,value为要查找的对象,通过比较对象的id属性来判断是否相等。

总结起来,当(this.internalValue || [])在v-select上启用多选时,如果想要找到某个值在数组中的索引,可以使用Array.prototype.indexOf方法或Array.prototype.findIndex方法。具体使用哪个方法取决于需求,如果只需要根据值来查找索引,可以使用indexOf方法;如果需要根据对象的某个属性值来查找索引,可以使用findIndex方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue 组件开发实践之 scopedSlot 的传递

使用Vue开发我们的vhtml-ui的组件库的过程中遇到了组件嵌套组件需要传递scopedSlot的情况,官方的文档和教程目前还没有比较明确的指引,所以摸着石头过河,调通了想要的效果。...Select组件一期 开发我们的select组件很自然就用上了scoped slot这一特性。我们需要遍历数据中的选项数组,渲染成界面上的下拉选项列表。...如果是比较复杂的允许自定义的list item,组件里写死dom结构就行不通了,比如: 有了scoped slot实现很轻松: <v-select kind="popup" :options...但是render函数的缺点就是不灵活,特别是定义你的组件的dom结构模板的时候,如果写很多 render 函数,可能会觉得痛苦。...它可以让我们回到于更接近模板的语法。具体关于JSX的使用不是本文的主题,我们可以阅读使用文档 ,学习关于 JSX 映射到 JavaScript的用法。

12K20

项目之前后端分离及导航栏标签列表(7)

如果访问列表的方法非常单一(例如用户列表,通常就只有1种显示条件,而商品列表却可以有很多种条件),设计URL,数据种类名称使用复数,右侧不再添加任何字符串; 访问某条数据以上基础右侧添加数据的唯一标识...,通常是数据的id,例如:/api/版本/数据种类/id; 对某种数据进行操作以上基础右侧添加需要执行的命令,例如:/api/版本/数据种类/id/数据操作; 以上设计方式仅供参考。..." multiple required placeholder="请选择问题的分类标签(可多选)"> 第190行,将标签的原id="app"改为id="createQuestionApp...一般情况下,客户端向服务器提交数据,可以选择的话,应该尽量提交id相关的值,而不是提交字符串的值!...假设某标签的id是8,名称是SpringBoot,最终客户端提交数据,应该将8 提交到服务器端,而不是把SpringBoot提交到服务器端!

1.4K10
  • 小程序开发知识必备-自定义组件

    2>自定义组件的生命周期 created:组件实例进入页面节点树执行,注意此时不能调用 setData attached:组件实例进入页面节点树执行, this.data 已被初始化为组件的当前值...detached:组件实例被从页面节点树移除执行。...Component({ created: function () { // 组件生命周期函数组件实例进入页面节点树执行, //注意此时不能调用setData console.log...("Component-1 >> created"); }, attached: function () { // 组件生命周期函数组件实例进入页面节点树执行。...触发 onHide 方法; 当小程序从后台进入前台运行或重新载入页面,触发 onShow 方法; 当小程序使用 wx.readirectTo()、关闭当前页和返回一页 wx.navigateBack

    1.4K20

    Js遍历数组总结

    callback,用作this的值 注意如果使用箭头函数表达式来传入callback,thisArg参数会被忽略,因为箭头函数词法绑定了this值 注意如果想在遍历执行完之前结束遍历,那么forEach...与map并不是好的选择 var arr = [1,2,3,4,5]; var obj = { a: 1 }; // 定义obj为了演示this用 arr.forEach( function(currentValue...callback,用作this的值 注意如果使用箭头函数表达式来传入callback,thisArg参数会被忽略,因为箭头函数词法绑定了this值 注意map回调函数return的结果组成了新数组的每一个元素...(callback(element[, index[, array]])[, thisArg]) // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。...console.log(arr.findIndex( (currentValue ) => { return currentValue > 2; })) // 2 console.log(arr.findIndex

    4.3K20

    find 和 findIndex 的讲解和实现

    findIndex JavaScript 中,findIndex 是一个数组方法,用于查找数组中满足指定条件的元素的索引。...callback:一个回调函数,用于定义查找条件。它接收三个参数: element:当前正在被处理的数组元素。 index(可选):当前元素的索引。...array(可选):调用 findIndex 的数组。 回调函数应返回一个布尔值,表示当前元素是否满足条件。 thisArg(可选):执行回调函数使用的 this 值。...需要注意的是,findIndex 方法是 ES6 中引入的新特性,因此较旧的浏览器或环境中可能不被支持。...类似,但返回的是满足条件的元素本身,而不是索引 const arr1 = [1, 2, 3, 4, 5] Array.prototype.myFindIndex = function (cb) {

    5210

    写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示

    开始本文之前,笔者主要会从以下方向上去实现该业务需求 1、尝试原有elementUI组件,写一个自定义指令,支持下拉虚拟列表 2、尝试使用社区成熟的虚拟列表插件方案实现虚拟列表 前置 我们知道虚拟列表本质就是可视区域内显示对应的数据...this.sourceData.push({ value: index, label: `test_${index}` }); }); } } 我们先看下左侧虚拟列表 下拉框并不是一次性渲染所有数据...item.value" > 然后我们注意到,我们在下拉框下绑定了@visible-change="handleVisibleChange"方法,实际只有我们在打开下拉框才会需要触发更新下拉...scrollView.style.paddingTop = '0px'; } this.renderOptions(); } 但是我们注意到,这里我们重置了scrollView的paddingTop,因为我们滚动设置了...并且如果是用插件,就必须要有id,virtual-list指定data-key 总结 主要是写了一个指令,elementUI的select组件支持虚拟列表展示,我们项目使用自定义指令支持下拉框的虚拟列表

    2.2K20

    JavaScript第十四弹——ES6(三)数组的扩展

    有一点要注意:当扩展运算符被放置了括号中,JS的引擎就会认为这是函数的调用。如果这时不是函数调用就会报错了,啥意思,看个例子!上面的一段代码能够正常输出,但是下面一段代码就会报错啦!...(是不是有小伙伴忘记了什么是解构赋值了 ? ,快回到上一篇看看) 常用函数 1)Array.from():将类似数组和可遍历的对象转化成数组,如set、字符串等 ?...数组实例函数 1)copyWithIn(target,start):在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,千万不要误会这个参数哦,并不是从几号位到几号位而是把...2)find() vs findIndex(): find():用于找出第一个符合条件的数组成员。 ?...findIndex():findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

    54510

    深入浅出 RxJS 之 辅助类操作符

    ,这个规约函数可以返回一个“累积”的结果,然后这个“累积”的结果会作为参数和数据集合的下一个元素一起成为规约函数下次被调用的参数,如此遍历集合中所有的元素,因为规约函数可以任意定义,所以最后得到的“累积...参数调用规约函数,而是直接作为 accumulation 参数传递给规约函数的第一次调用。...reduce$ = source$.reduce( (accumulation, current) => accumulation + current, 0 ); // 5050 实际,...const source$ = Observable.of(3, 1, 4, 1, 5, 9); const find$ = source$.find(x => x % 2 === 0); // 4 某些情况下...Observable 对象是不是“空的”,所谓“空的” Observable 是指没有吐出任何数据就完结的 Observable 对象。

    44510

    基于静态顺序表实现通讯录

    最后,调用`SLPushBack`函数,将这个联系人的信息添加到通讯录(实际是一个顺序表)中。 2....每次循环中,使用 strcmp 函数比较当前联系人的姓名 pcon->arr[i].name 和要查找的姓名 name。strcmp 函数用于比较两个字符串是否相同。...然后,它会调用 FindByName 函数(这个函数之前的解释中已经介绍过,它的作用是通讯录中查找指定姓名的联系人的下标)。...(该函数之前的代码段中定义),通讯录中查找指定姓名的联系人的下标。...将返回的下标存储 findIndex 变量中。 判断 findIndex 的值: 如果 findIndex 小于 0,表示没有找到匹配的联系人,于是打印一条提示信息并结束函数

    14910

    通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏)

    要在给定数组使用方法,只需要通过[].方法名即可,这些方法都定义 Array.prototype 对象。...然而,这一次,咱们将实际值作为参数而不是函数传递。...这里需要注意的是,values 放在第一位的,也就是放置原始数组的前面。 然后保存这个新数组的长度并遍历它,将它的值保存在原始数组中,并覆盖开始的值。...这里使用了这里的默认参数,这样当没有传递参数,slice方法只创建数组的副本。 注意:if语句确保只原始数组中存在给定索引下的值才加入 result 中。...这样,一个包含三个元素的数组映射之后仍然有三个元素。使用flatMap,提供的回调函数中,可以返回一个数组,这个数组稍后将被扁平。

    1K30

    15个必须知道的JavaScript数组方法

    本文中,我们将介绍15种关于JavaScript的数组方法,这些方法可以帮助你正确地处理数据。 1.some() 2. reduce() 3....译者注:reduce() 方法接受四个参数:初始值(一次回调的返回值),当前元素值,当前索引,原数组。...它为数组中的每个元素都调用一次函数执行,当数组中的元素测试条件返回 true , findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。...如果没有符合条件的元素返回 -1 译者注:findIndex() 对于空数组,函数是不会执行的, findIndex() 并没有改变数组的原始值。...find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素测试条件回 true , find() 返回符合条件的元素,之后的值不会再调用执行函数

    31820

    ECMAScript13 中11个令人惊叹的 JavaScript 新特性

    1.类 ES13之前,类字段只能在构造函数中声明。与许多其他语言不同,无法类的最外层作用域中声明或定义它们。...这一特性与其他面向对象编程语言(如 C# 和 Java)中的静态构造函数相似。 一个类的主体中,你可以定义任意数量的静态 {} 初始化块。...这个过程非常简单,但实际我们只是访问了索引为 t-1 的数组属性而已。...const obj = Object.create(null); obj.color = 'green'; obj.age = 2; // TypeError: obj.hasOwnProperty 不是函数...然而,处理大型数组,这种方法可能会导致性能问题,因为需要复制整个数组。 此外,findIndex()方法反转数组仍然无法达到预期效果,因为元素的反转会导致它们原始数组中的索引改变。

    25220

    Javascript数组系列三之你不了解的迭代2

    乍一看定义好像不是很好理解,来看一个例子你就会立刻明白,简单来说该方法就是对数组进行合并操作。...这里存在两种情况: 如果我们使用「reduce」方法的时候,提供可选的初始值(initialValue),回调函数第一次执行的时候,第一次的累计值会默认取值为给定的初始值,当前参与计算的元素会从数组的第一项开始...(即:accumulator = initialValue,currentValue = array0) 如果我们使用「reduce」方法的时候,没有提供初始值(initialValue),那么回调函数第一次执行的时候...> 10; }); console.log(result); //2 虽说两者的用法基本相同,但是没有得到满足我们条件的元素,其两者返回的结果会略有不同。...方法执行查找的过程中使用的是严格相等(===),案例中查找 '2' 返回 -1 ,就是这个原因,如果不知道 == 与 === 有什么区别的小伙伴可以自己查阅下资料进行了解。

    65930

    商城项目-商品新增

    这个表单比较复杂,因为商品的信息比较多,分成了4个部分来填写: 基本信息 商品描述信息 规格参数信息 SKU信息 5.2.从0开始 我们刚刚在查询,已经实现创建了MyGoodsForm.vue,并且已经...5.7.SKU特有属性 sku特有属性也存在与specifications中,但是我们现在只想展示特有属性,而不是从头遍历一次。...添加了一些布局样式,以及一个按钮,点击事件中删除一个值。 5.8.展示SKU列表 5.8.1.效果预览 当我们选定SKU的特有属性,就会对应出不同排列组合的SKU。 举例: ?...没错,之前讲过的一个数组功能:Reduce reduce函数的声明: reduce(callback,initvalue) callback:是一个回调函数。...reduce会把数组中的元素逐个用这个函数处理,然后把结果作为下一次回调函数的第一个参数,数组下个元素作为第二个参数,以此类推。 因此,我们可以把想要求笛卡尔积的多个数组先放到一个大数组中。

    3.4K20

    猿实战12——类目属性之动态绑定

    猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题。...新增类目属性这个功能中,我们可以输入需要增加的属性后,点击查询,检索需要新增的属性。然后通过勾选的方式,将需要需要新增的属性,勾选到右边列表,点击保存后,完成新增类目属性的功能。...新增类目属性整体前端 新增类目属性,从本质讲是一个子组件,通过我们一章节中展示属性库的数据(猿实战11——类目属性绑定之el-tree的使用),然后通过通过动态表单的方式,提供类目属性的动态新增和删除功能...} ], // 类型 statusList: [ { value: 1, label: '启用...关于如何做到勾选左侧展示的属性,到右侧的动态表单中,需要利用之前el-tree中定义的回调函数。如何获取已选中的数据节点?使用this.

    67520

    项目之提问页面-显示问题、发表问题(8)

    提问页面-显示问题标签的下拉列表 关于js代码: Vue.component('v-select', VueSelect.VueSelect); let createQuestionApp = new...本次“发表问题”,持久层主要处理的就是“向各数据表中插入数据”,插入数据,各数据应该都是完整的(将由业务层补全数据),由MyBatis Plus自带的insert()方法足以满足插入数据的需求!...如果创建了对象,需要检查对象的各属性值,如果某些属性是应该由客户端提交的,可以基于参数赋值或不处理,另一些属性不是由客户端提交的数据,必须补全这些属性的值!...发表问题-控制器层 QuestionController中添加处理请求的方法,此次处理请求,路径可以设计为/api/v1/questions/create,请求类型应该是post,客户端将需要提交QuestionDTO...发表问题-补全页面功能 关于提交请求并处理结果的函数: function () { let content = $('#summernote').val(); console.log("

    2.7K20

    ES13的11个超赞的新属性

    类成员声明 ES13之前,我们只能在构造函数里面声明类的成员,而不能像其他大多数语言一样类的最外层作用域里面声明成员: class Car { constructor() { this.color...类支持定义静态成员和静态私有方法 ES13中,我们还可以给类定义静态成员和静态私有函数。...这个属性是我们创建error对象传进去的第二个参数对象的cause属性: function userAction() { try { apiCallThatCanThrow(); }...数组支持逆序查找 JS中,我们可以使用数组的find()函数来在数组中找到第一个满足某个条件的元素。同样地,我们还可以通过findIndex()函数来返回这个元素的位置。...可是,无论是find()还是findIndex(),它们都是从数组的头部开始查找元素的,可是某些情况下,我们可能有从数组后面开始查找某个元素的需要。

    39120

    Swift基础 通用

    本例中称为T)而不是实际类型名称(如Int、String或Double)。...每种情况下,每当调用函数,类型参数都会替换为实际类型。(在上面的swapTwoValues(_:_:)示例中,第一次调用函数将T替换为Int,第二次调用时替换为String。)...您可以创建自定义泛型类型定义自己的类型约束,这些约束提供了泛型编程的大部分功能。像Hashable抽象概念根据概念特征而不是具体类型来描述类型。...为了表达这一事实,当您定义函数,您可以编写一个Equatable的类型约束,作为类型参数定义的一部分: func findIndex(of valueToFind: T,...上下文,其中条款 当您已经泛型类型上下文中工作,您可以编写一个泛型where子句,作为声明的一部分,该声明没有自己的泛型类型约束。例如,您可以泛型类型的下标或泛型类型扩展中的方法编写泛型子句。

    10700

    Javascript数组系列二之迭代方法2

    reduce 该方法对一个累加值和数组中的每一个元素执行给定的函数,返回一个函数累计处理的结果。 乍一看定义好像不是很好理解,来看一个例子你就会立刻明白,简单来说该方法就是对数组进行合并操作。...这里存在两种情况: 如果我们使用「reduce」方法的时候,提供可选的初始值(initialValue),回调函数第一次执行的时候,第一次的累计值会默认取值为给定的初始值,当前参与计算的元素会从数组的第一项开始...(即:accumulator = initialValue,currentValue = array[0]) 如果我们使用「reduce」方法的时候,没有提供初始值(initialValue),那么回调函数第一次执行的时候...而「reduceRight」方法的执行顺序为从右到左,除了在这一点与「reduce」不同之外,其他地方与「reduce」一毛一样,所以我们就不做过多解释了,看一个简单的例子即可。...)=> {     return item > 10; }); console.log(result); //2 虽说两者的用法基本相同,但是没有得到满足我们条件的元素,其两者返回的结果会略有不同。

    50420
    领券