[Vuejs]-Image file path in data property not showing until I open up the component in vue chrome dev tools

by

0👍

✅

You’re using the avatar_path computed property incorrectly:

  • You shouldn’t be modifying state in a computed property (you’re assigning to this.avatar).
  • Nothing is accessing avatar_path for it to be called. It’s when you open Vue dev tools that the dev tools code accesses that property so it can display it in the component data UI.

The best fix is to change avatar into a computed property like this:

computed: {
  avatar() {
    if (this.user) {
      return this.user.avatar_path;
    } else {
      // Use a placeholder image URL
      return '/path/to/placeholder.png';
    }
  }
}

0👍

<template>
<div>
    <div class="level">
        <img :src="avatar" width="50" height="50" class="mr-1">
    </div>

    <form method="POST" enctype="multipart/form-data">
        <input type="file" accept="image/*" @change="onChange">
    </form>

</div>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
        };
    },
    computed: {
        user() {
          return this.$store.state.user
        },
        avatar() {
            return this.user.avatar_path;
        },
    },
    methods: {

    }
}

Leave a comment