广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何解决Vue不能检测数组或对象变动的问题
  • 600

0
分享到

如何解决Vue不能检测数组或对象变动的问题

2024-04-02 19:04:59 600人浏览 八月长安
摘要

小编给大家分享一下如何解决Vue不能检测数组或对象变动的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！来看一个实例：<!DOCTYPE html> <htm

小编给大家分享一下如何解决Vue不能检测数组或对象变动的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

来看一个实例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注：下面这么设置是可以的。例如 
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1; 
   // this.numbers.splice(index,0,1) //用splice方法能同步显示，但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });
 
 </script>
</body>
</html>

想实现的效果是点击 li 看 vm.nymbers[index] 是否存在，不存在设置为1，存在的话加1。

点击之后数字并没有在view层更新，而通过console打印发现数据更新了，只是view层没有及时的检测到。

再看一个改动之后的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="Https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是数组，这里更新数据就可以直接在view层渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

可以看到这里的view层能及时得到更新，但是到了数组哪里为什么就不可以了呢？

来看Vue2.0官方的文档说明：

由于 javascript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({ 
 data: { 
 userProfile: { 
  name: 'Anika' 
 } 
 } 
})

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

应该这样做：

this.userProfile = Object.assign({}, this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

因此，上面例子应该改为：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

搞定！

1.17补充-------------------------------

如何理解“对于已经创建的实例，Vue 不能动态添加根级别的响应式属性”？

例如：

var vm=new Vue({ 
 el:'#test', 
 data:{ 
  //data中已经存在info根属性 
  info:{ 
   name:'小明' 
  } 
 } 
}); 
//给info添加一个性别属性 
Vue.set(vm.info,'sex','男');

上面是正确做法，下面的做法的话就会报错了：

Vue.set(vm.data,'sex','男')

实际上，不能直接在data上增加属性，但可以在data里的对象上增加属性。

实际上vm.data是undefined。

看完了这篇文章，相信你对“如何解决Vue不能检测数组或对象变动的问题”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网html频道，感谢各位的阅读！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何解决Vue不能检测数组或对象变动的问题

本文链接: https://www.lsjlt.com/news/73369.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何解决Vue不能检测数组或对象变动的问题
    小编给大家分享一下如何解决Vue不能检测数组或对象变动的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！来看一个实例：<!DOCTYPE html> <htm...
    99+
    2022-10-19
  • vue如何检测对象和数组的变化
    这篇文章主要介绍了vue如何检测对象和数组的变化的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue如何检测对象和数组的变化文章都会有所收获，下面我们一起来看看吧。检测对象变化1、不能检测到对象属性的添加或删除...
    99+
    2023-07-04
  • 如何解决vue数组中对象属性变化页面不渲染的问题
    这篇文章主要介绍了如何解决vue数组中对象属性变化页面不渲染的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。做checkbox多选功能的...
    99+
    2022-10-19
  • Vue Watch方法不能监听到数组或对象值的改变怎么解决
    这篇文章主要介绍了Vue Watch方法不能监听到数组或对象值的改变怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue Watch方法不能监听到数组或对象值的改变怎么解决文章都会有...
    99+
    2023-06-29
  • 如何解决vue数组和对象渲染的问题
    这篇文章给大家分享的是有关如何解决vue数组和对象渲染的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。数组更新检测在 vue 中使用数组的push()、pop()、shift...
    99+
    2022-10-19
  • Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
    目录前言一：利用索引直接改变arr的值 如我在button事件中写的（arr[0]=1000）二：直接修改数组的长度 如this.arr.length=3 总结如下前言 V...
    99+
    2022-11-13
  • 如何解决Vue中数组和对象更改后视图不刷新的问题
    这篇文章主要为大家展示了“如何解决Vue中数组和对象更改后视图不刷新的问题”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何解决Vue中数组和对象更改后视图不刷...
    99+
    2022-10-19
  • 如何解决对象不支持indexOf属性或方法的问题
    小编给大家分享一下如何解决对象不支持indexOf属性或方法的问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！var diva...
    99+
    2022-10-19
  • 如何解决php对象参数不确定的问题
    小编给大家分享一下如何解决php对象参数不确定的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！php对象参数不确定的时候需要改变一下写法，修改后的代码如“function uncertainParam() {$args...
    99+
    2023-06-26
  • 如何解决vue路由变化页面数据不刷新的问题
    这篇文章给大家分享的是有关如何解决vue路由变化页面数据不刷新的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。每天记录一点点，把我遇到的问题记录下来， 希望可以帮助到更多和我...
    99+
    2022-10-19
  • 如何解决ActiveX部件不能创建对象：dm.dmsoft代码：800A01AD的问题
    这篇文章主要介绍如何解决ActiveX部件不能创建对象：dm.dmsoft代码：800A01AD的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！vbs调用插件报：ActiveX部件不能创建对象，代码：800A01...
    99+
    2023-06-08
  • 如何解决vue进入页面时不在顶部以及检测滚动返回顶部按钮的问题
    小编给大家分享一下如何解决vue进入页面时不在顶部以及检测滚动返回顶部按钮的问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！这...
    99+
    2022-10-19
  • 如何解决ajax回调函数中使用$(this)取不到对象的问题
    本篇内容主要讲解“如何解决ajax回调函数中使用$(this)取不到对象的问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何解决ajax回调函数中使用$(t...
    99+
    2022-10-19
  • 如何解决vue-router在同一个路由下切换,取不到变化的路由参数问题
    小编给大家分享一下如何解决vue-router在同一个路由下切换,取不到变化的路由参数问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！最近用vue写项目的时候碰到一个问题，在同一个页面下...
    99+
    2022-10-19
  • 如何解决Vue中引入swiper在数据渲染的时候,发生不滑动的问题
    这篇文章给大家分享的是有关如何解决Vue中引入swiper在数据渲染的时候,发生不滑动的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前几天在工作的过程中，在数据渲染的时候，...
    99+
    2022-10-19
  • 如何解决未能打开这台计算机上的Vista组策略对象且可能没有合适的权限问题
    如何解决未能打开这台计算机上的Vista组策略对象且可能没有合适的权限问题，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。详细信息：系统找不到指定的路径 解决办法...
    99+
    2023-06-14
  • 如何解决vue跳转同一个组件,参数不同,页面接收值只接收一次的问题
    这篇文章主要介绍如何解决vue跳转同一个组件,参数不同,页面接收值只接收一次的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！作为vue的初用者，你可能会像我一样遇到一个问题，对跳...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作