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

Question

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

Я пытаюсь сделать это с вычисляемым свойством, но я не получаю 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>

Answer 1

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

<q-icon :name="item.item_type === 'link' ? 'link' : 'double_arrow'" />

Answer 2

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

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'
}

Answer 3

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