根据响应中收到的值动态更改项目的图标

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

尝试在获取数据后向每个项目添加 icon_type - 在 getItensList() 方法中。您将拥有每个项目都带有附加图标的列表。

Answer 2

您不需要计算属性，只需这样：

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

Answer 3

您不能像这样使用计算属性，而是可以创建方法

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

根据响应中收到的值动态更改项目的图标

Change the item's icon dynamically according to the value received in response

vue.js

icons

quasar