Issues encountered while modifying Vue data

Question

Issues encountered while modifying Vue data

In my Vue JS 2 code, I have structured my data as follows:

data : {
          newBus: {
            name: '',
            hours: {
              sunday: '',
            }
          }
        }

When setting the data using this input field:

<input v-model="newBus.hours.sunday" type="text" placeholder="Sunday">

Adding a business in this way is successful. However, when attempting to update the data by clicking on an item from a list and having the saved data fill the form, the following method is used:

<div v-for="bus in businesses" v-on:click="editBus(bus)" class="list-group-item bus-list-item">{{bus.name}}</div>

The editBus() method encounters the error:

vue.js:1453 TypeError: Cannot read property 'sunday' of undefined

This issue arises immediately upon clicking the item for updating. Any suggestions on how to tackle this?

EDIT: It seems that the error is linked to the absence of the hours property in the bus object. When checking with console.log(bus), it does not display. How can I incorporate this data into the business object without causing errors? It's puzzling because if it were not nested - i.e., sunday: '' instead of hours: { sunday: ''} - it functions correctly.

EDIT: For reference, here is the recreation on CodePen.

javascript vue.js vuejs2

Answer 1

Answer №1

The issue at hand is more of a Javascript problem rather than a Vue problem. You cannot access a property of undefined.

Let's consider the data structure in your code sample.

newComment: {
    name: '',
    comment: '',
    votes:  0,
    time:  timeStamp(),
    subcomment: {
        name: ''
    }
}

In this scenario, you have set up all values with defined placeholders, so everything should work smoothly. The problem arises when you click on the edit button, and the received object appears as below:

{
    name: "some name",
    comment: "some comment",
    time: "4/5/2017",
    votes: 145,
    .key: "-Kh0PVK9_2p1oYmzWEjJ"
}

It's crucial to note that there is no subcomment property present here. This leads to the following results when trying to access this code:

newComment.subcomment

which evaluates to undefined. However, in your template, you proceed to reference:

newComment.subcomment.name

Therefore, you are attempting to retrieve the name property of undefined, resulting in an error being thrown.

To prevent this error, one approach is to ensure that the subcomment property exists before rendering the element using v-if:

input#name(type="text")(placeholder="Name")(v-model="newComment.subcomment.name")(v-if="newComment.subcomment")

This will help avoid the error from occurring.

Alternatively, within your editComment method, you could verify if subcomment exists, and if not, add it:

if (!comment.subcomment)
    comment.subcomment = {name: ''}
this.newComment = comment

Lastly, why does it work with non-nested data? The key distinction lies in this: if newComment exists in the form of

newComment: {}

and you attempt to access newComment.name, the result will be undefined. If your template includes something like v-model="newComment.name", no crashes will occur; it will simply set the input value to undefined and update accordingly.

Essentially, when referencing newComment.subcomment.name, you are targeting a property of a nonexistent entity, whereas with newComment.name, the object itself exists without the name property.

Answer 2

The issue at hand is more of a Javascript problem rather than a Vue problem. You cannot access a property of undefined.

Let's consider the data structure in your code sample.

newComment: {
    name: '',
    comment: '',
    votes:  0,
    time:  timeStamp(),
    subcomment: {
        name: ''
    }
}

In this scenario, you have set up all values with defined placeholders, so everything should work smoothly. The problem arises when you click on the edit button, and the received object appears as below:

{
    name: "some name",
    comment: "some comment",
    time: "4/5/2017",
    votes: 145,
    .key: "-Kh0PVK9_2p1oYmzWEjJ"
}

It's crucial to note that there is no subcomment property present here. This leads to the following results when trying to access this code:

newComment.subcomment

which evaluates to undefined. However, in your template, you proceed to reference:

newComment.subcomment.name

Therefore, you are attempting to retrieve the name property of undefined, resulting in an error being thrown.

To prevent this error, one approach is to ensure that the subcomment property exists before rendering the element using v-if:

input#name(type="text")(placeholder="Name")(v-model="newComment.subcomment.name")(v-if="newComment.subcomment")

This will help avoid the error from occurring.

Alternatively, within your editComment method, you could verify if subcomment exists, and if not, add it:

if (!comment.subcomment)
    comment.subcomment = {name: ''}
this.newComment = comment

Lastly, why does it work with non-nested data? The key distinction lies in this: if newComment exists in the form of

newComment: {}

and you attempt to access newComment.name, the result will be undefined. If your template includes something like v-model="newComment.name", no crashes will occur; it will simply set the input value to undefined and update accordingly.

Essentially, when referencing newComment.subcomment.name, you are targeting a property of a nonexistent entity, whereas with newComment.name, the object itself exists without the name property.

Issues encountered while modifying Vue data

Answer №1

Similar questions

Tips on retrieving PHP variable values along with HTML response using AJAX in PHP

Exploring ways to expand a field in Laravel Nova

Callback is triggered after ng-if removes the directive from the scope

Tips for updating a specific field within an object in an array within a mongoose schema and persisting the changes

Is it possible to implement Vue2 components within a Vue3 environment?

Expiration Alert: SSL Certificates for HERE Links will expire shortly

Ensure that all asynchronous code within the class constructor finishes executing before any class methods are invoked

Configure environment variables for either grunt or grunt-exec

Switching languages in Nuxt i18n causes the data object to reset

Developing a personalized language setting in Nuxt.js for internationalization

Error: Material UI search bar doesn't refresh interface

Is it better to include the Google Analytics code in the master page or on every individual page of an asp.net

Is it possible to modify the color of a division row using an onchange event in JQuery?

Send the form using an alternative method to avoid using preventDefault

I am encountering difficulties with generating images on canvas within an Angular environment

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Using plain JavaScript, adding an element to an array by pushing the value of a string variable in an index position rather than pushing the

Verify that each interface in an array includes all of its respective fields - Angular 8

What is the best way to trigger an event in VueJS?

Explanation of TypeScript typings for JavaScript libraries API