vue获取data中数组的value值_控制台修改vue组件中data对象里的数组意外失效

最新推荐文章于 2024-08-13 19:07:43 发布

何为自律

最新推荐文章于 2024-08-13 19:07:43 发布

阅读量2.9k

点赞数

文章标签： vue获取data中数组的value值

本文链接：https://blog.csdn.net/weixin_33521678/article/details/111960163

版权

在Vue.js学习过程中，发现修改data对象内的数组不会立即更新视图，除非使用Vue.set()。例如，直接修改arrs数组元素无效，而修改其他属性后，数组元素会随之更新。解决方案是利用Vue.set确保数组变化的响应性。

摘要由CSDN通过智能技术生成

摘要：

最近在学习Vue.js，其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情，比如这篇提到的：修改data对象里面的数组，有的成功有的意外失效......

一、发现

最近在看Vue.js，然后发现data对象里面的属性并非都可以通过控制台来更新！

按照官方的说法：每个 Vue实例都会代理其 data对象里所有的属性，注意只有这些被代理的属性是响应的......配图一张：

然后艺灵就按照此示例练习了下，最终的结果有点出人意料之外。话不多说，上代码。

二、示例代码

2.1、js源码

var app=new Vue({

el:'#app',

data:{

a:1,

b:'',

items:[

{text:'i0'},

{text:'i1'},

{text:'i2'}

todos:{

text1:'t1',

text2:'t2',

text3:'t3'

arrs:[

'Do the dishes',

'Take out the trash',

'Mow the lawn'

]

}

});

为了更直观的看到效果，有必要在页面中显示下data

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

何为自律

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【Vue】value值如何通过{{}}获取？答：【:value="item.value"】或者【v-bind:value="item.value"】...

Tuling2020的博客

10-31

2599

var historyList = new Vue({ el: '#historyList', data: { items: [ //{text:'3000吨以下',value:'0-3000'}, //{text:'5000吨至 1.0w吨',value:'5000-10000'}, ...

Vue如何循环提取对象数组中的值

01-21

1.数据如下，提取name和callcount 2代码. getQueryCallStatistics(sesp1, this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap = res.data.callstatistics; res.data.callstatistics.forEach((element) => { // arr.p

参与评论您还未登录，请先登录后发表或查看评论

Vue3中组件中定义的Data分析

最新发布

binqian的专栏

08-13

972

看上面输出结果来看，msg在data 和 setup 两个函数返回中都用，从上面结果看是取的setup中的，不重名的其他数据有从data中获取的，说明setup的返回结果优先级别要大于data 返回的结果，等下从源码分析下，看vue3是怎么实现这个的。从上面的代码看，在处理methods时，里面的方法执行时上下文的this 是instance.proxy，也就是ctx，而data 和 setup方法返回的结果都扩展到了ctx上，所有可以直接用this.msg 访问这个属性。Vue3 的版本3.4.30。

vue获取data中数组的value值_vue的data里面的值是数组时，在更改其某一项的时候，怎么触发视图的重新渲染？...

weixin_35919125的博客

01-17

1485

1. 设置对象或数组的值：Vue.set(target,key,value) ；2.删除对象或数组中元素： Vue.delete ( target,key) ;3. 数组对象直接修改属性，可以触发视图更新：this.array[0].show = true;4.splice方法修改数组，可以触发视图更新：this.array.splice(indexOfItem, 1, newElement)5....

vue获取data中数组的value值_在vue.js中如何获取select中的value值（详细教程） -

weixin_27038701的博客

12-24

3147

thinkphp开发的一个项目，登录成功后又跳转到登录页面，在提交信息后输出session都是正常的，没有问题，但是页面跳转后，session出现丢失现象，无法正常完成登陆。通过查找资料，发现原来是bom头的原因。受COOKIE送出机制...下面我就为大家分享一篇vue.js 获取select中的value实例，具有很好的参考价值，希望对大家有所帮助。如下所示：Document{{ option....

浏览器控制台查看修改vue项目(vue-cli)数据

hunt_er的博客

11-23

9116

在写vue项目时想到一个问题，项目里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？我们知道，用传统的html形式引用vue可以通过给最外层的vue实例命名 var myapp=new Vue({ el:'#app', data:{ a:1 } }) 然后在控制台输入myapp.a=2改变里面data的值,这样在浏览器控制台调试很方便那么现在采用vue-cli构建项目时，里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？方法是在creat

浅谈 Vue2 数组对象新增属性，响应式失效问题

chenyajundd的博客

08-02

1609

Vue2 数组对象，动态添加对象属性，vue响应式失效，页面监听不到新增属性的变化。

Vue2.0 子组件修改props中的值导致问题及报错解决

StarFishing

04-13

7316

vue 父组件给子组件的prop传值报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. P...

【Bug记录】Vue绑定按钮点击事件不生效，控制台不打印信息

翱翔于世纪的博客

03-12

1187

目录一、问题描述二、发现问题并解决一、问题描述作为刚入门Vue小白的我，在使用Vue进行登录表单按钮绑定点击事件的时候，发现其方法没有执行。一点击按钮就会重新刷新页面。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @

yangyangdt的博客

12-19

9267

vue3基础知识点2 前言：上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。

v-for 获取数组key value_Vue之路 | 05von、vif、vfor

weixin_39783426的博客

11-25

980

点击左上方“熊吱”关注我们吧！1事件监听在开发中，需要监听用户发生的事件，如点击、拖拽、键盘操作等，在Vue中，使用v-on指令绑定事件监听器。v-on的语法糖为：@v-on基本操作在下面代码中，使用了v-on语法(使用的是语法糖@)绑定了一个点击事件，事件指向了一个methods中定义的函数： <div id="app"> <h1&gt...

vue获取data中数组的value值_关于获取到option中的数组的值的问题，求大神帮忙

weixin_30351503的博客

01-14

1289

存款周期：{{ option.text }}存款利率: %data() {return {selected:‘1.5’,options:[{text:‘活期’,value:‘0.35’},{text:‘3个月定期’,value:‘1.1’},{text:‘6个月定期’,value:‘1.3’},{text:‘一年定期’,value:‘1.5’},{text:‘二年定期’,value:‘2.1’}...

vue 数组赋值_如何给Vue的data中的数组赋值？

weixin_33553051的博客

12-23

3267

---------html-----------{{item.text}}{{item.text}}￥{{item.text}}----------script------------var vm = new Vue({el: "#tbody",data: {index: [],domain: [],price: []}}).....function getBackData(params, pag...

Vue基础模板语法

大屌的博客

08-01

349

Vue.js 使用了基于 HTML 的模板语法，下面为大家介绍一些基本的模板语法：文章目录插值指令动态参数过滤器计算属性及监听属性插值 1，文本插值：新建一个Vue 在data里面写的属性，都能通过{{}}来取值。 <div id="uu"> {{msg}} </div> <script type="text/javascript"> new Vu...

vue 获取data里的array

csdndd521的博客

04-25

1153

获取data里的array的话；先转json遍历，获取到全部的txarray里的内容后，再次遍历array里的就可以

vue通过变量名的字符串形式，获取在data中声明的变量

上好佳的博客

12-21

2328

问题描述：在data中声明了多个变量：如（tagEdit :false）。因为变量名后半部分重复，触发点击事件时，只传前缀（如 tagEdit，@click="click('tag')"） HTML部分：解决方案：接收后获取并且改变变量值，`${变量}`是一种字符串拼接的写法 //正常获取时：this.tagEdit = true，拼接字符串获取：this[`${tag+"Edit"}`] = true 实现效果：通过点击事件控制页面内容显隐，(click方法中，变量为..

微信小程序-动态给data里的数组赋值

xwc999

10-25

5739

问题所在： js Page({ data: { arr:[] }, addEle(){ this.data.arr.push("1") console.log(this.data.arr) this.setData({ arr : this.data.arr }); } }) wxml <view clas...

Vue笨蛋学原理：如何获取data里的对象类型里的数据

m0_47883103的博客

09-17

3082

在上一篇我们只考虑了单属性，比如：( {{ name }} ),而Vue中大量的使用层级，比如：( {{ child.name. firstName}} ) 直接上代码如何访问name.firstName呢？ let data = { name:{ firstName:'刘'，, lastName:'亦菲' } } 我们是使用xxx.yyy.zzz来访问对象里的数据，也就是点运算符也可以说一个字符串路径来访问对象成员 function getValueByData(obj,pa.

vue在methods中获取data中数组对象中的某个值

05-25

可以使用数组的find方法或者forEach方法来获取data中数组对象中的某个值。例如： ```javascript data() { return { items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' } ] } }, methods: { getItemName(id) { const item = this.items.find(item => item.id === id) return item ? item.name : '' }, getItemName2(id) { let name = '' this.items.forEach(item => { if (item.id === id) { name = item.name } }) return name } } ``` 上面的代码中，getItemName方法使用了数组的find方法来获取id对应的对象，然后返回对象的name属性。getItemName2方法则是使用了数组的forEach方法来遍历数组，找到对应的对象再返回name属性。