Не удалось найти один или несколько значков предупреждений с помощью приложения vuejs

Question

Я не могу исправить предупреждение "Не удалось найти один или несколько значков (ов) {префикс:" далеко ", iconName:" квадрат "} {}" (скриншот прикреплен). Предупреждение появляется, когда я изменяю значение'typeOfAreaClass' или выберите «безопасную область» из «areaClass»

Вот снимок экрана меню v-select сквадратный значок, если это поможет вам дать предложение.

Я попытался установить библиотеку шрифтов. Это не помогло. Одна вещь, которую я понял, заключается в том, что предупреждение появляется, когда я добавляю опору «множественный» в компонент v-select. Если я уберу эту опору, предупреждения не будет. Но это убивает цель. Помогает ли это вам дать предложение? Мой шрифт потрясающие ионы работают нормально. Только v-select prop 'multiple' создает предупреждение.

Вот код HTML

  <v-flex xs12 md4 sm4  >
    <v-select
    class="myfont1 mt-3 pa-0 customDecoration text-xs-right" 
    @change="assignHazGroups"
    :items="typeOfAreaClassItems"
    v-model="typeOfAreaClassSelect"
    style="max-width:170px;"
    dense
    ></v-select> 
  </v-flex>

  <v-flex xs12 md4 sm4  >
    <v-select
    class="myfont1 mt-3 pa-0 mx-0 customDecoration" 
    @change="safeAreaFilter"
    :items="typeOfAreaClassSelect ==='American' ?areaClassAmericanItems:areaClassEuropeanItems"
    v-model="areaClassSelect"
    style="max-width:220px;"
    dense
    ></v-select> 
  </v-flex>

  <v-flex xs12 md4 sm4 class="ma-0 pa-0"
  >
    <v-select
    class="myfont1 mt-3 pa-0 mx-0 customDecoration"
    :items="typeOfAreaClassSelect =='American' ?hazGroupAmericanItems:hazGroupEuropeanItems"
    v-model="hazGroupSelect"
    multiple
    small-chips
    style="max-width:350px;"
    dense
    ></v-select>    

  </v-flex>

Вот переменные массива

typeOfAreaClassItems:["American","European"],
            areaClassAmericanItems:[
                "Safe Area",
                "Class I, Div 1/Class I, Div 2",
                "Class I, Div 1",
                "Class I, Div 2",
            ],
            areaClassEuropeanItems:[
                "Safe Area",
                "Zone-1/Zone-2",
                "Zone-1",
                "Zone-2"
            ],
            hazGroupAmericanItems:[
                "Group A",
                "Group B",
                "Group C",
                "Group D",
                "NA"
            ],
            hazGroupEuropeanItems:[
                "IIC",
                "IIB+H2",
                "IIB",
                "IIA",
                "NA"
            ],
            eleCertItems:[
                "CSA",
                "UL",
                "ATEX",
                "FM",
                "PESO",
                "JIS (Japan)",
                "GOST (Russia)"
            ],
            
            
  //computed variables          
            typeOfAreaClassSelect:{
                get () {
                    return this.$store.getters.typeOfAreaClassSelect
                },
                set (value) {
                    this.$store.dispatch('setTypeOfAreaClassSelect',{data:value})
                }
            },
            areaClassSelect:{
                get () {
                    return this.$store.getters.areaClassSelect
                },
                set (value) {
                    this.$store.dispatch('setAreaClassSelect',{data:value})
                }
            },
            hazGroupSelect:{
                get () {
                    return this.$store.getters.hazGroupSelect
                },
                set (value) {
                    this.$store.dispatch('setHazGroupSelect',{data:value})
                }
            },
            eleCertSelect:{
                get () {
                    return this.$store.getters.eleCertSelect
                },
                set (value) {
                    this.$store.dispatch('setEleCertSelect',{data:value})
                }
            },
            
            

А вот и функции

assignHazGroups(){
    if(this.typeOfAreaClassSelect === "American"){
        this.areaClassSelect = "Class I, Div 2"
        this.hazGroupSelect = [
            "Group A",
            "Group B"
        ]
    }
    else{
        this.areaClassSelect = "Zone-2"
        this.hazGroupSelect = [
            "IIB",
            "IIA"
        ]
    }
},
safeAreaFilter(){
    if(this.areaClassSelect === "Safe Area"){
        this.hazGroupSelect = ["NA"]
    }
    else{
        if(this.typeOfAreaClassSelect === "American"){
            this.hazGroupSelect = [
                "Group A",
                "Group B"
            ]
        }
        else{
            this.hazGroupSelect = [
                "IIB",
                "IIA"
            ]
        }
    }
},

Появляется, когда я вызываю событие @change и вызываю функцию. Нужно избавиться от этого предупреждения. Код все работает нормально. Но есть это предупреждение, которое раздражает. Кто-нибудь, пожалуйста, предложите выход. Заранее спасибо

Answer 1

Я исправил это сам

Вот что я сделал. Я изменил иконку шрифта в js-файле плагина vuetify.

в файле /plugins/vuetify.js

изменил следующий код

Vue.use(Vuetify, {
  iconfont: 'faSvg',
})

к этому

Vue.use(Vuetify, {
  iconfont: 'md',
})

Это по существу исправило значок предупреждения. Это так глупо, что иногда мы тратим часы, чтобы решить простую проблему. Я написал это, чтобы кто-то нашел это полезным. В любом случае, спасибо всем за ваше время. Удачного кодирования!