Как добавить значок со шрифтом к вновь созданному элементу в vueJS / Vuetify? - PullRequest
Новая
       37

Как добавить значок со шрифтом к вновь созданному элементу в vueJS / Vuetify?

0 голосов
/ 26 мая 2019

Я пытаюсь создать список пользователей, в котором пользователь выбирает свой значок из ряда значков. Они активируют модальный режим, вводят свою информацию и выбирают «добавить пользователя». У меня возникли проблемы с нажатием на значке, как вы можете видеть ниже, я использую 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>

1 Ответ

1 голос
/ 26 мая 2019

В ваших кнопках для массива значков, если вы добавляете отдельный значок в качестве параметра, вы можете назначить его своему пользовательскому объекту. Вот так: 

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