Насколько правильна такая запись vuejs?

Question

[Smeecy Smeecy]

Как новичок, хочу спросить, насколько правильна такая запись метода во Vuejs? Или это велосипед, ведь будь кнопок не 2, а 3 и больше , то затруднительно было бы писать такие условия.

<button class="modal-heading__button modal-heading__button-login"  @click="LoginViewShow" :class="{mhactive: isActive = LoginView}">Вход</button>

<button class="modal-heading__button modal-heading__button-reg" @click="RegViewShow" :class="{mhactive: isActive = RegView}">Регистрация</button>

data(){
			return {
			LoginView: true,
			RegView: false
			}
		},
		methods: {
			RegViewShow() {
				this.RegView = true,
				this.LoginView = false
			},
			LoginViewShow() {
				this.LoginView = true,
				this.RegView = false
			}
		}

Comments

[origami1024]

Во первых isActive = просто опускаешь

:class="{mhactive: LoginView}"
:class="{mhactive: RegView}"

[Smeecy Smeecy]

origami1024, а по поводу методов?

Answer 1

[origami1024]

Вот вариант сокращения

<button class="modal-heading__button modal-heading__button-login"  v-if="view==='log'" @click="view='reg'">login</button>
<button class="modal-heading__button modal-heading__button-register"  v-else-if="view==='reg'" @click="view='3rd'">register</button>
<button class="modal-heading__button modal-heading__button-thirdOption"  v-else-if="view==='3rd'" @click="view='log'">the wae of the deval</button>

...
data(){
    return {
        view: 'log'
    }
}
...

вот песочница, если чо
https://codepen.io/origami1024/pen/bGbyWaO

UPD: еще сокращения

Comments

[Smeecy Smeecy]

Спасибо!

[PEMOK]

Все от общей логики завист, вариант, вариантом, но у вас тоже норм. if else нужно использлвать там где это необходимо.

[origami1024]

PEMOK, да офигенный вариант, if else как раз в эту логику идеально вписывается, что тебе не нравится?

[PEMOK]

Он же кусок кода показал и обозначил что изучает вью. Я и сказал что нужно использовать все по ситуации

[PEMOK]

Что его решение не является плохим

[PEMOK]

В своем коде он может показать обе кнопки, а в твоем одну из 3х

[origami1024]

PEMOK,
вот здесь тоже норм по твоему

{mhactive: isActive = RegView}

?

[origami1024]

PEMOK, ему 1 из 3 и нужна

[PEMOK]

origami1024, не ну тут то хня конечно, там просто биндинг должен быть. Я думал у него две кнопки и он их просто стилями дисаблид)