stevenh
6 months ago
194
2
Vue

Passing a laravel object conditionally to a vue component.

Posted 6 months ago by stevenh

Hi,

I have a form in a vue component for entering a user's profile information. When the user has already created a profile, the form is populated with the data from an object $profile that is passed from the controller to the blade view and then passed to the vue component as the prop "profile".

When the user has no profile currently ($profile is null), I would like the form fields to be blank.

I'm not sure how to treat the prop "profile" in the component when the object does not exist.

The script of my vue component is as follows:

export default {
  mixins: [formSubmit],
  props: [
    "profile",
  ],
  data() {
    return {
      fields: {
        about: this.profile.about,
        website: this.profile.website,
        instagram: this.profile.instagram,
        facebook: this.profile.facebook,
      },
      snackbarString: "Saved"
    };
  },
  
  
  
};
</script>

When $profile is passed from the controller, it works fine but when the object does not exist yet, I get an undefined error in vue :

TypeError: Cannot read property 'about' of undefined

How should I deal with the object conditionally in the vue component?

Sorry if it's obvious...

Please sign in or create an account to participate in this conversation.