1

Привет

Не могу прохавать элементарную штуку Есть компонент:

<template>
    <div>
        <a 
            v-for="social in socials" 
            href=""
        >
            <i class="icon-mail"></i>
        </a>
    </div>
</template>

<script>
    export default{
        mounted() {
            console.log('Component SocialButton.vue mounted');
        },

        data() {
            return {
                socials: [
                    { 
                        name: 'Email', 
                        type: 'mail', 
                        value: '[email protected]',
                    },
                    { 
                        name: 'Phone', 
                        type: 'bell', 
                        value: '000 000 000 000',
                    },
                    { 
                        name: 'Facebook', 
                        type: 'facebook', 
                        value: 'facebook',
                    },
                    { 
                        name: 'Twitter', 
                        type: 'twitter', 
                        value: 'twitter',
                    },
                    { 
                        name: 'Pinterest', 
                        type: 'pinterest', 
                        value: 'pinterest',
                    }
                ]
            }
        }
    }
</script>

Так вот, нужно в ссылку вставить класс относительно того, какой type Например:

если type равен mail или bell, то class="hidden-md-down" а если type равен другому значению, то class="social-button sb-{{type}} shape-none sb-dark"

Спасибо

1 ответ 1

5

На самом деле все просто. Перечитайте документацию, в частности про props. Нужно передать в :class объект. Вот пример работы: https://www.webpackbin.com/bins/-Ksyzb-hKth3YA1MVkNw

<template>
    <div>
        <a 
            v-for="social in socials" 
            href=""
           :class="{
             'social-email': social.type == 'mail',
             'social-bell': social.type == 'bell',
             'social-facebook': social.type == 'facebook'
           }"
        >
            <i class="icon-{{social.type}}"></i>{{social.value}}
        </a>
    </div>
</template>

<script>
    export default{
        mounted() {
            console.log('Component SocialButton.vue mounted');
        },

        data() {
            return {
                socials: [
                    { 
                        name: 'Email', 
                        type: 'mail', 
                        value: '[email protected]',
                    },
                    { 
                        name: 'Phone', 
                        type: 'bell', 
                        value: '000 000 000 000',
                    },
                    { 
                        name: 'Facebook', 
                        type: 'facebook', 
                        value: 'facebook',
                    },
                    { 
                        name: 'Twitter', 
                        type: 'twitter', 
                        value: 'twitter',
                    },
                    { 
                        name: 'Pinterest', 
                        type: 'pinterest', 
                        value: 'pinterest',
                    }
                ]
            }
        }
    }
</script>

2
  • круто спасибо :)
    – k0mar
    1 сен 2017 в 20:16
  • Да не за что. Все начинали когда-то 1 сен 2017 в 20:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.