Как отображать иконки условно с помощью v-for? - PullRequest
Новая
       12

Как отображать иконки условно с помощью v-for?

0 голосов
/ 10 января 2020

У меня есть набор данных, который я итерирую для отображения определенных полей в v-data-table. Как сделать так, чтобы при значении поля значка G отображался определенный значок. Если он имеет F, появится другой значок, а если GF, то в одной строке появятся два значка.

Вот пример ручка . 

new Vue({
  el: '#app',
  data() {
    return {
      headers: [{
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        {
          text: 'Calories',
          value: 'calories'
        },
        {
          text: 'Fat (g)',
          value: 'fat'
        },
        {
          text: 'Icon Field',
          value: 'icon'
        }
      ],
      desserts: [{
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          icon: 'GF'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          icon: 'F'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          icon: 'G'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          icon: 'GF'
        },
      ]
    }
  }
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts">
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.calories }}</td>
        <td>{{ props.item.fat }}</td>
         <td> {{ props.item.icon}} </td>
      </template>
    </v-data-table>
  </v-app>
</div>

Я пытался установить v-if = props.item.icon == 'GF', но это не помогло. Любая помощь будет оценена. Спасибо.

Ответы [ 4 ]

2 голосов
/ 10 января 2020

Вы не должны использовать v-if внутри v-for. Вы можете отфильтровать массив и затем выполнить итерацию.

Существует полезная ссылка на Vue рекомендации https://vuejs.org/v2/style-guide/#Avoid -v-if-with-v-for-essential

1 голос
/ 10 января 2020

Один из способов - добавить список значков, которые вы хотите визуализировать, а затем использовать ссылку v-for

на рабочий раствор 

// data

icons: {
  F: ["gavel"],
  G: ["event"],
  GF: ["gavel", "event"]
},

// template


<td>
  <v-icon v-for="icon in icons[props.item.icon]">{{icon}}</v-icon>
</td>

Таким образом, у вас есть хорошее масштабируемое решение :-)

0 голосов
/ 10 января 2020

Я не кодирую в Vue, но что-то подобное должно работать, вы можете использовать массив для иконок и использовать "icons.map (icon => <>)" et c.

let desserts = [

{
    name: 'ice',
    icon: 'G'
},
{
    name: 'ice2',
    icon: 'E'
},
{
    name: 'ice3',
    icon: 'F'
}

]

let icons = {

val1: '',
val2: '',
val3: ''

};

desserts.forEach ((десерт) = > {

switch(dessert.icon){
    case 'G':
        icons.val1 = 'http://iconurl'
    case 'E':
        icons.val2 = 'http://iconurl'
    case 'F':
        icons.val3 = 'http://iconurl'
}

})

0 голосов
/ 10 января 2020

Используйте Vue фильтры, дополнительную информацию читайте здесь https://vuejs.org/v2/guide/filters.html

...
filters: {
  getIcon(value) {
    if (value == "G") {
      return "your icon"
    }
    else if (value == "GF") {
      return "your icon"
    }
    else if (value == "F") {
      return "your icon"
    }
  }
}
...
...
<td> {{ props.item.icon | getIcon}} </td>
...
...