Динамическое изменение значка элемента в соответствии со значением, полученным в ответ

Динамическое изменение значка элемента в соответствии со значением, полученным в ответ

28.01.2020 05:57:07 Просмотров 26 Источник

Мне нужно динамически изменить значок элемента в соответствии со значением, полученным в ответе сервера.

Я пытаюсь сделать это с вычисляемым свойством, но я не получаю значение item_type, отправленное в ответе.

Я ценю идеи о том, как сделать эту работу?

<template>
<div class="q-pa-md">
    <q-list>
        <q-item 
            clickable 
            v-for="(item, index) in itens" 
            :key="item.id_item" 
            :id="index" >

            <q-item-section avatar>
                <q-icon :name="iconType" />
            </q-item-section>

            <q-item-section>
                <q-item-label>{{ item.item_name }}</q-item-label>
            </q-item-section>

        </q-item>
    </q-list>
    </div>
</template>

<script>

export default {
    data () {
        return {
            itens: [
              //  id_item:''
              //  item_name:'',
              //  item_type:''
            ]
        }
    },

    computed : {
        iconType(){
            let type = this.itens.item_type; //does not work

            if(type === 'link'){
               return "link"
            }else{
               return 'double_arrow'
            }
        }
    },

    mounted: {
        this.getItensList();
    },

    methods: {
        getItensList(id){            
             this.$axios.get(`/itenslist`)                
            .then(response => {              
              if (response.data.success) {
                  this.itens = response.data.itens
              } else {
              }
            })
            .catch(error => {         
            });
        },
    }
}
</script>
У вопроса есть решение - Посмотреть?

Ответы - Динамическое изменение значка элемента в соответствии со значением, полученным в ответ / Change the item's icon dynamically according to the value received in response

winiar

28.01.2020 06:03:48

Попробуйте добавить icon_typeк каждому элементу после извлечения данных-внутри getItensList(). У вас будет список с прикрепленной иконкой к каждому элементу.

fabruex

28.01.2020 06:10:11

Вам не нужно вычисляемое свойство, просто это:

<q-icon :name="item.item_type === 'link' ? 'link' : 'double_arrow'" />
https://stackoverflow.com/questions/59951474/change-the-items-icon-dynamically-according-to-the-value-received-in-response/59951697#comment106023087_59951697
спасибо, Фабро. в моем реальном случае есть 8 различных значков.
https://stackoverflow.com/questions/59951474/change-the-items-icon-dynamically-according-to-the-value-received-in-response/59951697#comment106023237_59951697
Поэтому используйте метод с параметром item_type (см. ответ Эмиля Гулбиса)
Является ответом!
Emīls Gulbis

28.01.2020 06:10:21

Вы не можете использовать вычисляемые свойства, как это, вместо этого вы можете создать метод

iconType(item){
  let type = item.item_type

  if(type === 'link'){
    return "link"
  } else {
    return 'double_arrow'
  }
}

и используйте его как <q-icon :name="iconType(item)" />

для более чистого кода Вы можете попробовать этот подход

iconType(item) {
  return {
    link: 'link',
    otherType: 'otherIcon'
  }[item.itemType] || 'double_arrow'
}
https://stackoverflow.com/questions/59951474/change-the-items-icon-dynamically-according-to-the-value-received-in-response/59951702#comment106023185_59951702
Я пробовал это раньше, но я получаю ошибку: Ошибка в визуализации: "TypeError: _vm.iconType-это не функция"
https://stackoverflow.com/questions/59951474/change-the-items-icon-dynamically-according-to-the-value-received-in-response/59951702#comment106023240_59951702
Вы должны поместить его в methods, а computed
https://stackoverflow.com/questions/59951474/change-the-items-icon-dynamically-according-to-the-value-received-in-response/59951702#comment106023482_59951702
Спасибо, Эмиль. Отлично работает
Закрыть X