javascript - 如何将字体真棒图标附加到 vueJS / Vuetify 中新创建的元素?
问题描述
我正在尝试创建一个用户列表,用户在其中从一行图标中选择他们的图标。他们激活一个模式,输入他们的信息,然后选择“添加用户”。我无法获取单击图标的值,如下所示,我使用this.icons[0]
了控制台日志。但我无法成功让他们动态记录。此外,我无法成功地将图标添加到该人(即使在调用索引的情况下,如上所述。最好/最干净的方法是什么?我清理了一堆代码,但这应该给出一个对此有深刻的理解。如果我可以提供任何进一步的代码或信息,请告诉我。提前致谢!
<template>
<div>
<v-expansion-panel v-for="user in users" :key="user.name" class="mb-1">
<v-expansion-panel-content>
<div slot="header" class="flex-row">
<v-icon>{{user.icon}}</v-icon>
<span class="px-1">{{user.name}}</span>
<span class="px-1">{{user.age}}</span>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
<v-dialog max-width="600px" v-model="dialog">
<v-btn fab slot="activator" class="primary mb-3">
<v-icon>fa-user-plus</v-icon>
</v-btn>
<v-card>
<v-card-title>
<h2>Add a New User</h2>
</v-card-title>
<v-card-text>
<v-form class="px-3" ref="form">
<v-text-field label="Name" v-model="user.name" prepend-icon="person"></v-text-field>
<v-text-field label="Age" v-model="user.age" prepend-icon="fa-heart"></v-text-field>
<div>
<v-btn flat icon v-for="(icon, index ) in icons" :key="index" @click="appendIcon()">
<v-icon>{{icon}}</v-icon>
</v-btn>
</div>
<v-btn
flat
class="primary mx-0 mt-3"
@click="addUser(user);
dialog=!dialog"
>Add user</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
methods: {
addUser: function(user) {
this.users.push(user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + " added to list");
},
appendIcon: function() {
console.log(this.icons[0]);
}
},
data() {
return {
dialog = fa
users: [],
user: {
name: undefined,
age: undefined,
icon: undefined,
},
icons: [
"fas fa-user",
"far fa-user",
"fas fa-user-cog",
]
};
}
};
</script>
解决方案
如果您将单个图标添加为参数,则在您的图标数组的按钮中,您可以将其分配给您的用户对象。像这样:
@click="appendIcon(icon)"
和方法:
appendIcon(icon) {
this.user.icon = icon
console.log(icon);
}
然后,当您调用 addUser() 时,您可以使用已经设置的用户对象,因此您不需要将其作为参数传递。
@click="addUser";
和那个方法:
addUser() {
this.users.push(this.user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + " added to list");
},
推荐阅读
- python - OCR tesseract 改善详细背景的结果
- c++ - 为什么通过打印星形矩形来移动第一行?
- r - 无法使用 tidy 从 aov 中获得额外的 p 值
- angular - 如何保护阵列以供 Firebase Firestore 中的用户访问?
- vue.js - 使用 AXIOS GET 和 VUE JS 检索 CSV 内容 - 返回超时错误
- javascript - 在反应中,我提出了 CORS 策略错误,所以我该如何处理它
- php - wopress 分页不适用于下一页或预览页面
- java - ForkJoinTask - 加入()与调用()
- r - 在 R 中一次创建多个具有特殊长度的向量
- javascript - 如何按不同的属性将对象列表分组到字符串中?