Vue Js 中的 Key 和 value 如何迭代

关键词：

【中文标题】Vue Js 中的 Key 和 value 如何迭代【英文标题】：How Key and value Iterate in Vue Js 【发布时间】：2021-02-16 21:20:32 【问题描述】：

我正在尝试使用 vue.js 中的键和值迭代波纹管数组。

attributes = "Size - UK":"12","Color":"White".

这个array 正在从数据库中获取string

我想要如下结果

Size : 12 Color : White

我使用下面的方法来做到这一点

 <span :v-for="(item, index) in attributes">
     item : index
 </span>

我遇到了这样的错误。

Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

我该如何解决这个问题？

【问题讨论】：

【参考方案1】：

v-for 属性不应包含:（请参阅docs）

删除: 试试这个：

// https://codepen.io/collection/naevzw/
var example1 = new Vue(
  el: '#example-1',
  data: 
    items:
       message: 'Foo', text: 'Bar', other: 'FooBar' 
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- v-for - VUE.js Guide Example -->
<ul id="example-1">
  <li v-for="(key) in Object.keys(items)">
     key  :  items[key] 
  </li>
</ul>

【讨论】：

我试过了。但我得到这样的结果 '0 : 1 :" 2 : S 3 : i 4 : z 5 : e 6 : 7 : - 8 : 9 : U 10 : K 11 :" 12 : : 13 :" 14：1 15：2 16：“17：，18：”19：C 20：o 21：l 22：o 23：r 24：“25：：26：”27：W 28：h 29：i 30： t 31：e 32：“33：” 我从数据库中以string 获取此数组，这是个问题吗？ 问题是我的数组是字符串我添加JSON.parse(items) to.problem 是固定的。谢谢大家【参考方案2】：

试试这个：

<span v-for="key in Object.keys(attributes)">
     key : attributes[key]
 </span>

【讨论】：

这不起作用。获取错误称为TypeError: Cannot use 'in' operator to search for 'undefined' in "Size - UK":"12","Color":"White" 我试过了。但我得到这样的结果 '0 : 1 :" 2 : S 3 : i 4 : z 5 : e 6 : 7 : - 8 : 9 : U 10 : K 11 :" 12 : : 13 :" 14：1 15：2 16：“17：，18：”19：C 20：o 21：l 22：o 23：r 24：“25：：26：”27：W 28：h 29：i 30： t 31：e 32：“33：” 问题是我的数组是字符串我添加JSON.parse(attributes) to.problem 是固定的。谢谢大家

【vue】为啥要使用vue.$set(target,key,value)

...的显示。vue在构造函数newVue()时，就通过Object.defineProperty中的getter和setter这两个方法，完成了对数据的绑定。所以直接通过vm.arr[1]='aa'的方法，无法修改值触发vue中视图的更新，必须还得通过Object.defineProperty的方法去改变，... 查看详情

如何通过获取map中的key来获得与key对应的value值，进行运算

获取map的key和value的方法分为以下两种形式：1、map.keySet()：先获取map的key，然后根据key获取对应的value；2、map.entrySet()：同时查询map的key和value，只需要查询一次；注意：当map的value值相等时，根据key值进行排序很多人都推荐使用... 查看详情

为什么要使用vue.$set(target,key,value)

...的显示。vue在构造函数newVue()时，就通过Object.defineProperty中的getter和setter这两个方法，完成了对 查看详情

vue.js中如何获取data中map的value

vue中从后台获取了一个Map(String,List)格式，map里面put了("list1",list1),("list2",list2)两对数据,前端怎么分别获取两个list？vue-router文档$route.params参考vue-router文档，可通过$route对象获取params参数对象。同时transition对象的to... 查看详情

js中怎么获取json中的key，value值？

...数以后，在获取和和读取函数中进行调用。遍历读取文件中的数据。6、获取Json文件中的全部数据以后，将数据用Html代码呈现到网页上。参考技术Avarobj="id":1,"name":"张三";for(varkeyinobj)alert("Key是:"+key);... 查看详情

求一段js中使用key和value的例子，最好有点备注。

...is.get=function(key)returnthis.data[key];;//去除键值，(去除键数据中的键名及对应的值)this.remove=function(key)this.keys.remove(key);this.data[key]=null;;//判断键值元素是否为空this.isEmpty=function()returnthis.keys.length==0;;//获取键值元素大小this.size=function()r... 查看详情

js中已知一个array，怎样获取一个map在array中的索引

...取varmap=key:'1',value:'一',如何获取这个map在array中的下标，使用array.indexOf(map)时总是返回-1，求解参考技术Aarray.map((item)=>item.key).indexOf(map.key);map.key是你定义的map的key  参考技术B不行的话就用循环吧varindex=(function()f... 查看详情

vue中的vue.set和this.$set的区别

参考技术A2019年8月14号上午，有个需求为，根据点击的按钮联动一个下拉列表，如，点击“全部”,下拉列表显示所有的选项，点击“待申请”，下拉列表显示待申请的选项。想要改变vue中数组，并且被实时自动检测数组的变动，... 查看详情

js如何把object怎么转化数组，并取出object中的值

参考技术A原则上obj是不能转换成数组的。首先array也是obj。只是一个特殊的object。obj一个很关键的点，是拥有成员和方法，撇开方法不说，obj就是一个key-value结构。也就是哈希数组，而js的数组只能是由数字索引组成的。撇开了k... 查看详情

如何在vue.js双向绑定显示value/text不一致的select中的value

参考技术A<span>selected.text</span><selectv-model="selected"><optionvalue="v1">t1</option><optionvalue="v2">t2</option></select>拿到一个键值对的序列比如date=v1:t1,v2:t2，然后绑定select获得到value只... 查看详情

如何获取vfor中的key值并打印到控制台？

...的key值，如下图所示：请点击输入图片描述第四步，将d3中的方法keys改为values，对应的values是获取对象的value值，如下图所示：请点击输入图片描述第五步，再次保存代码并打开浏览器查看打印结果，注意在浏览器控制台查看，... 查看详情

vue或者js给数组添加新的主键key-value键值对(代码片段)

res.data需要循环的数组，newKey：创建新的key，newValue：创建对应key的值//从数组中循环想要的键值对的值，并重新创建k-v值 varnewArr=res.data.map(item=>( newKey:item.key, newValue:item.value )) 查看详情

如何将java中的map转换成jsonobject

参考技术Ahashmap是以键值对(key-value)的格式保存对象的容器,数组是按顺序一个一个保存对象的容器你把hashmap转换成数组是想把key转成数组呢还是把value转成数组呢或者key和value组合成的对象转换成数组呢.我把key和value的分别写出... 查看详情

vue语法基础三（样式绑定）(代码片段)

...ass绑定　　1.1对象语法　　使用js对象的方式，也就是key-value的方式，给元素的class属性绑定样式，其中key是样式，value控制key样式是否有效，value是个布尔值。<style>divdivwidth:100px;height:100px;.a 查看详情

javamap问题

Map中的一个key能否对应两个不同的value？Map中的一个value能否对应两个不同的key？如何从Map中删除符合指定条件的value？如何使遍历Map时取出的元素顺序与放入时一致？如何合并两个Map？Map中的一个key能否对应两个不同的value？答... 查看详情

js遍历json的key和value

遍历json对象：无规律：<script>varjson=[{dd:‘SB‘,AA:‘东东‘,re1:123},{cccc:‘dd‘,lk:‘1qw‘}];for(vari=0,l=json.length;i<l;i++){for(varkeyinjson[i]){alert(key+‘:‘+json[i][key]);}}</script>　　有规律： p 查看详情

mybatis获取map中的key和value(代码片段)

低版本mybatis<foreachcollection="mapInfo.entrySet()"item="item"index="index"separator=",">$item.key=VALUES(#item.value)</foreach>高版本<foreachcollection="eventExtdInfo.entrySet()"item="i 查看详情

如何创建键字典：column_name 和 value：来自数据框的 python 中的列中的唯一值

】如何创建键字典：column_name和value：来自数据框的python中的列中的唯一值【英文标题】：Howtocreateadictionaryofkey:column_nameandvalue:uniquevaluesincolumninpythonfromadataframe【发布时间】：2017-10-2116:03:40【问题描述】：我正在尝试创建一个key:v... 查看详情