queria reescrever esse codigo em vue.js
1 Resposta
Primeiramente, benvindo ao StackOverflow 😊
Quando à sua pergunta, sendo que o VueJs é muito flexivel, há várias maneiras de fazer o que pergunta, mas uma delas pode ser:
<div :class="wrapClass">
<button @click.prevent="toggleClass">Toggle class</button>
</div>
e no script, algo como
<script>
export default {
data() {
return {
wrapClass: 'class1' // class inicial
};
},
methods: {
toggleClass() {
this.wrapClass = this.wrapClass === 'class1'
? '' // remove a class
: 'class1' // adiciona a class
}
}
}
</script>
:class="wrapClass
ao comecar um atributo com:
estamos a dizer ao Vue que a palavra dentro de aspas, é uma variavel e näo uma string@click.prevent="toggleClass"
sendo que@
é o mesmo quev-on:
estamos a dizer ao Vue que no eventoclick
queremos que ele execute um metodo, e adicionamos.prevent
para prevenir que o browser siga o "link" do botao- o metodo é simples, e apenas usamos uma variavel
wrapClass
que contem a classe original, e quando executamos o metodotoggleClass
mudamos de um para o outro valor
fica aqui um exemplo no CodePen: https://codepen.io/balexandre/pen/poEGqyQ
-
Você não precisa utilizar o
.prevent
se usar o<button>
adequadamente. Por padrão o<button>
toma como default otype="submit"
, por isso o comportamento de submissão de formulário que você tenta previnir... Simplemente use<button type="button" @click="toggleClass">...</button>
que assim não haverá esse comportamento de submissão de form.– GiovaneCommented 19/01/2021 às 13:04 -
eu entendo, mas ele pediu como reescrever o codigo, e se faz uso de tal funcao, eu mencionei tambem 😊 Commented 19/01/2021 às 14:49