Как сделать связанные значки внутри кнопок? - PullRequest
Новая
       11

Как сделать связанные значки внутри кнопок?

0 голосов
/ 14 марта 2019

Скажи, У меня есть группа кнопок, которые я рассматриваю как целый компонент: 

<template>
    <div>
        <button v-for="button in buttonsGroup">{{button.icon}}</button>
    </div>
</template>

Объект - это объект "buttonsGroup": 

export default {
    name: 'buttonsGroup',
    props: ['buttonsGroup']
}

Когда я использую компонент, у меня есть список кнопок с иконками, такими как: 

data(){
  return {
    iconButtons: [
                    {
                        icon: '<i class="fas fa-smile"></i>',
                    },
                    {
                        icon: '<i class="fas fa-sad-tear"></i>',
                    }
    ]
  }
}

А затем используйте в layot: 

<buttons-group v-bind:buttonsGroup="iconButtons"></buttons-group>

В результате я вижу список кнопок, но вместо значков внутри кнопок я вижу их как текст.

Что я сделал не так?

Ответы [ 3 ]

2 голосов
/ 14 марта 2019

Вы можете использовать html-директиву для вставки html-контента 

<button v-for="button in buttonsGroup" v-html="button.icon" />

Но лучшим подходом может быть просто указать имя значка для компонента 

<button v-for="button in buttonsGroup">
    <i :class="'fas ' + button.icon">
</button>

и 

iconButtons: [
    {icon: "fa-smile"},
    {icon: "fa-sad-tear"}
]
1 голос
/ 14 марта 2019

Прочитайте раздел документации по необработанному HTML: https://vuejs.org/v2/guide/syntax.html#Raw-HTML

По умолчанию двойные скобки будут отображаться как текст, но вы можете добавить флаг v-html для его отображения.

0 голосов
/ 14 марта 2019

Также учтите, что компонент "группа кнопок" не имеет состояния для наблюдения, поэтому это идеальный случай для функционального компонента .

Так что вы можете достичь этого следующим образом: 

<template functional>
  <div>
    <button v-for="(button, index) of props.buttonsGroup"
          :key="index"
          v-html="button.icon" 
          v-on="listeners" <!-- In case you want to listen to button events -->
    />
  </div>
</template>

И в сценарии: 

export default {
  props: {
    buttonsGroup: Array
  }
}
...