Question

我正在尝试创建一个用户列表，其中用户从图标行中选择其图标。他们激活模式，输入信息，然后选择“添加用户”。我无法点击图标的值，如下所示，我使用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>

Answer 1

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

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

如何在vueJS / Vuetify中将字体真棒图标添加到新创建的元素中？

1 个答案: