If for some reason I want to delete an object property in a vuejs data object, the view might not update when doing so. There is the force update method that can be used to update a view if necessary that might help in these kinds of situations. However there is the built in Vue delete method as well that can also be used to delete an object property and update the view in one shot.
Although a solution like this might work there is the built in vue delete method that can be used to both delete the object key, and update the view in one shot.
One way to use the delete method is as a global method of Vue. When using the delete method this was the delete method is called off of the main Vue global. Once I call it I then pass the object that I want to delete something from as the first argument, and then the index, or key name in the object that I want to delete.
So that is the basic idea at least of the vue delete method, I pass the property of the data object I want to delete, and then a key as the second argument. The object property will then be deleted, and the view will render. There are a number of other ways that the delete method can be used to delete an object property from the data object though, so lets look at a few more examples of this one.
So how about a full copy and past example of the vuejs delete method as well as a whole bunch of other vuejs features. Here I have a very simple list example where I am using the vue delete method to delete names on a list when the name is given in a text input element and a delete button is pressed.
So this example makes use of vue el to attach to a hard coded html element by an id attribute, I am also making use of the vue template option to define additional html code that will be appended to the hard coded html element that I am attaching to. In this template I am using the vue for directive to repeat an element for each item in a collection, in this case an array of names. I am also using another important directive that a vuejs developer should be aware of called vue model that is what I need to use when working with text input elements and the data object. There are many other vuejs features being used such as the methods option, and vue on directive.
One thing to keep in mind when making a project that involves deleting an object is to stop and ask yourself if you really even need to delete an object to begin with. In some situations maybe you just do and as such there needs to be a process to delete an object in a way that will work without problems. However there is the idea of just flagging an object as not being currently active, and then use that flag as a way to not render anything for the object, or use that object to update something.
Think about how a file system works on a hard drive for a moment, when you go do delete a file does the data disappear? Nope the area on the hard drive where the data for that file is just ends up being flag as empty space. As such when it comes to writing new data to the file system that are of the disk can now be used for something else. So it is possible to create vuejs projects that follow a similar kind of dynamic where I create a set number of objects, and have an active flag for each object that serves as a way to know if the object is being used or not.
So then in this example each time I click the add button I then get an object with an active flag set to false, and set the mess prop of that object to what I have in the text input element and set the active flag of the object to true. In the template I am then using the v-for directive to create a div for each object in the pool, but the object only has its mess property displayed if the active flag in true thanks to the v-if directive.
The delete method of the vue instance does not actually delete an object it just sets the active flag back to false. At which point the object can in turn be used for something new.