Vue.js 从名字和姓氏中获取首字母以显示在头像中答案

【问题标题】：Vue.js getting initials from name and surname to display in avatarVue.js 从名字和姓氏中获取首字母以显示在头像中
【发布时间】：2021-02-22 09:29:22
【问题描述】：

我有一个 vuetify 自动完成功能，它搜索所有用户的列表，然后我创建一个新的单独的发言人列表：

<v-autocomplete
  v-model="user"
  :items="usersData"
  label="Search"
  :search-input.sync="searchUser"
  item-value="id"
  item-text="name"
  return-object
/>

我正在尝试设置一个 speakerInitials 方法，该方法应该从用户的姓名和姓氏中获取第一个字符以显示在头像中：

<v-list-item
  v-for="speaker in speakers"
  :key="speaker.id"
>
  <v-avatar
    size="48"
  >
    <span
      class="white--text"
    >
      {{ speakerInitials() }}
    </span>
  </v-avatar>
  <v-list-item-content>
    <v-list-item-title>
      <h6>{{ speaker.name }}</h6> ...

我将speaker 传递给一个方法，希望得到首字母，但目前我什么也没得到+ 没有错误。我在这里做错了什么吗？

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) : ''}`
  }
}

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您没有将 speaker 对象作为参数传递给方法：

{{ speakerInitials(speaker) }}

小演示：

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) : ''}`;
    }
  }
});

<div id="app">
  <div v-for="speaker in speakers" :key="speaker.id">
    {{ speakerInitials(speaker) }}
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：