Assignment issues between vue arrays and objects
This time I will bring you the assignment problem of vuearray and object. What are the notes of vue array and object assignment, as follows This is a practical case, let’s take a look at it.
Vue cannot detect the following changed arrays:
When you set an item directly using the index, for example: vm.items[indexOfItem] = newValue
When you modify the length of the array, for example: vm.items.length = newLength
When required in the first case, you can use this.$set(this.arr,index,newVal)
Vue cannot detect the addition or deletion of the object attribute :
You can use this.$set(this.person,'age',12)
When you need to add multiple objects, <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.assign({},this.person,{age:12,name:'wee'})
PS: Vue implements deep copy and replication of arrays and objects
When an object is passed between components, since the reference type of this object all points to an address (except for the basic type and null, the assignment between objects only points the address to the same one, not in the true sense copy), as follows
Array:
var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a); // a变成了[1,2,3,4]
Object:
var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了，
alert(obj.a); // 20，obj的a跟着改变This is due to the direct assignment of the object type, which just points the reference to the same address. Modifying obj will also cause obj2 to be modified
So in Vue, if multiple components reference the same object as data, then when one of the components changes the object data, the data of other objects will also be changed simultaneously. If there is a need for such two-way binding, then it is naturally the best. But if you do not need this binding and want the object data of each component to be independent of each other, that is, copies of objects that are not related to each other, you can use the following Solution
computed: {
data: function () {
var obj={};
obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象
return obj
}
}I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How does Yuansheng JS implement asynchronous file upload
js performs time size comparison
The above is the detailed content of Assignment issues between vue arrays and objects. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to enable copy and paste for VMware virtual machines
Feb 21, 2024 am 10:09 AM
You can easily copy and paste text and files between VMware virtual machines (VMs) and physical systems. This capability allows you to easily transfer images, formatted and unformatted text, and even email attachments between virtual machines and host systems. This article will show you how to enable this feature and demonstrate methods for copying data, files, and folders. How to Enable Copy/Paste in VMware VMware provides three different ways to copy data, files or folders from a virtual machine to a physical computer and vice versa, as explained below: Copy and Paste Elements Drag and Drop Feature Folder Sharing 1 ] Enable copy-paste using VMware Tools You can use the keyboard if your VMWare installation and guest operating system meet the requirements
How to copy a page in Word
Feb 20, 2024 am 10:09 AM
Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch
Convert an array or object to a JSON string using PHP's json_encode() function
Nov 03, 2023 pm 03:30 PM
JSON (JavaScriptObjectNotation) is a lightweight data exchange format that has become a common format for data exchange between web applications. PHP's json_encode() function can convert an array or object into a JSON string. This article will introduce how to use PHP's json_encode() function, including syntax, parameters, return values, and specific examples. Syntax The syntax of the json_encode() function is as follows: st
How to convert MySQL query result array to object?
Apr 29, 2024 pm 01:09 PM
Here's how to convert a MySQL query result array into an object: Create an empty object array. Loop through the resulting array and create a new object for each row. Use a foreach loop to assign the key-value pairs of each row to the corresponding properties of the new object. Adds a new object to the object array. Close the database connection.
Teach you how to diagnose common iPhone problems
Dec 03, 2023 am 08:15 AM
Known for its powerful performance and versatile features, the iPhone is not immune to the occasional hiccup or technical difficulty, a common trait among complex electronic devices. Experiencing iPhone problems can be frustrating, but usually no alarm is needed. In this comprehensive guide, we aim to demystify some of the most commonly encountered challenges associated with iPhone usage. Our step-by-step approach is designed to help you resolve these common issues, providing practical solutions and troubleshooting tips to get your equipment back in peak working order. Whether you're facing a glitch or a more complex problem, this article can help you resolve them effectively. General Troubleshooting Tips Before delving into specific troubleshooting steps, here are some helpful
How to solve the problem that jQuery cannot obtain the form element value
Feb 19, 2024 pm 02:01 PM
To solve the problem that jQuery.val() cannot be used, specific code examples are required. For front-end developers, using jQuery is one of the common operations. Among them, using the .val() method to get or set the value of a form element is a very common operation. However, in some specific cases, the problem of not being able to use the .val() method may arise. This article will introduce some common situations and solutions, and provide specific code examples. Problem Description When using jQuery to develop front-end pages, sometimes you will encounter
Unlock macOS clipboard history, efficient copy and paste techniques
Feb 19, 2024 pm 01:18 PM
On Mac, it's common to need to copy and paste content between different documents. The macOS clipboard only retains the last copied item, which limits our work efficiency. Fortunately, there are some third-party applications that can help us view and manage our clipboard history easily. How to View Clipboard Contents in Finder There is a built-in clipboard viewer in Finder, allowing you to view the contents of the current clipboard at any time to avoid pasting errors. The operation is very simple: open the Finder, click the Edit menu, and then select Show Clipboard. Although the function of viewing the contents of the clipboard in the Finder is small, there are a few points to note: the clipboard viewer in the Finder can only display the contents and cannot edit them. If you copied
Disable or enable automatic copy selection for copying in Terminal
Mar 24, 2024 am 09:46 AM
This article will show you how to enable or disable automatic copying of selections to the clipboard in Windows Terminal. Windows Terminal is a multi-tab terminal emulator developed by Microsoft specifically for Windows 11/10, replacing the traditional command prompt. It supports running applications such as Command Prompt, PowerShell, WSL, Azure, etc. Often when working in the terminal, users need to copy commands and output, however the terminal does not support copying selection operations by default. Keep reading this article to learn how to fix this issue. How to enable or disable automatic copying of selections to cache in Terminal? Here's how you can enable or disable automatic copying of selections to the Terminal clipboard: Open the Terminal application and click above
