首页 > 解决方案 > 如何将字体真棒图标附加到 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>

标签: javascriptvue.jsfont-awesomevuetify.js

解决方案


如果您将单个图标添加为参数,则在您的图标数组的按钮中,您可以将其分配给您的用户对象。像这样:

@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");
},

推荐阅读