Vue.js getting initials from name and surname to display in avatar

Question

I have a vuetify autocomplete that searches a list of all users which I then create a new separate list of speakers from:

I am trying to setup a speakerInitials method which should take the first chars from the user's name and surname to display in the avatar:


  
    
      {{ speakerInitials() }}
    
  
  
    
      {{ speaker.name }} ...

I am passing speaker to a method in hope to get the initials but currently I get nothing back + no errors. Is there something I am doing incorrectly here?

data () => ({
  user: {},
  speaker {},
  searchUser: null,
  userRole: '',
  speakers: []
}),
computed: {
  ...mapState({
    users: state => state.users
  }),
  usersData () {
    return this.users.map(user => {
      return {
        name: user.name,
        uid: user.uid
      }
    })
  }
},
methods: {
  speakerInitials (speaker) {
    if (!speaker) return
    const name = speaker.user.name.split(' ')
    return `${name[0].charAt(0)}${name[1] ? name[1].charAt(0) : ''}`
  }
}

user_2185093 · Answer

You aren't passing the speaker object as an argument to the method:

{{ speakerInitials(speaker) }}

Small demo:

new Vue({
  el: "#app",
  data() {
    return {
      speakers: [
        { id: 1, user: { name: 'Frodo Baggins' }},   // FB
        { id: 2, user: { name: 'Samwise Gamgee' }},  // SG
        { id: 3, user: { name: 'Peregrin Took' }},   // PT
        { id: 4, user: { name: 'Gandalf' }},         // G
      ]
    }
  },
  methods: {
    speakerInitials(speaker) {
      const name = speaker.user.name.split(' ')
      return `${name[0].charAt(0)}${name[1] ? name[1].charAt(0) : ''}`;
    }
  }
});


  
    {{ speakerInitials(speaker) }}

Vue.js getting initials from name and surname to display in avatar

1 Answers