Почему мой компьютерный метод работает как на стороне сервера, так и на стороне клиента? - PullRequest
Новая
       20

Почему мой компьютерный метод работает как на стороне сервера, так и на стороне клиента?

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

Я делаю универсальное приложение с Nuxt и Vue. js, и я заметил, что у моей кнопки было какое-то странное поведение, она изменила класс после загрузки страницы, и, поскольку она имеет переход, она стала довольно раздражает.

Я установил класс кнопки с помощью вычисляемого метода. Поэтому я попытался поместить console.log в вычисляемый метод, а затем увидел, что он называется как на стороне сервера, так и на стороне клиента? Как это возможно? Что мне нужно сделать, чтобы метод назывался только на стороне сервера? 

<template>
    <a :href="link" :class="themeClass">
        <slot />
    </a>
</template>

<script>
export default {
    props: { 
        link:{
            type:String,
            default: '',
        },
        theme:
        {
            type:String,
            default: 'primary',
            validator: (value) => ['secondary', 'tertiary'].includes(value),
        },
        inverted:{
            type:Boolean,
            default: false,
        },
    },
    computed:{
        themeClass: function()
        {
            console.log("set style");
            let invertedStyle = this.inverted ? '-inverted' : '';
            return 'butt ' + this.theme + invertedStyle;
        }
    }
}
</script>

<style lang="scss" scoped>
.butt{
    box-sizing: border-box;  
    cursor: pointer;
    display: block;
    text-align: center;
    width: 170px;
    height: 40px;
    line-height: 40px;
    transition: 0.2s;
}

.primary{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.primary:hover{
    border: 2px solid $primary-color;
    @include alphaBackground();
}

.primary-inverted{
    border: 2px solid $primary-color;
    color: $primary-color;
    @include alphaBackground();
}

.primary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.secondary{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.secondary:hover{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.tertiary{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}

.tertiary:hover{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}
</style>

1 Ответ

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

Я получил следующий ответ от Nuxt discord 

computed: {
  something() {
    return !process.client ? 'runs on server' : ''
  }
}
...