我有一个 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) : ''}`
}
}
答案 0 :(得分: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>