I have a disabled button, which depends on other fields to be enabled:
<button class="actAplicarTodosFiltros" disabled="disabled">Aplicar</button>
So I have tabs that make some changes but I wanted the v-on: click of those tabs to be executed only when the apply button was enabled.
<li v-on:click="executaAlgo"><a href="#">Vendas</a></li>
Is it possible to use some v-if from one button to the other?
Mixing jQuery logic with Vue.js is not very simple, and I advise against doing so. But because it is possible and may even be necessary you can use MutationObserver to detect changes in button and import them into Vue. It would look something like this:
document.querySelector('#toggle').addEventListener('click', function toggle() {
const button = document.querySelector('#app button');
button.disabled = !button.disabled;
});
new Vue({
el: '#app',
data() {
return {
disabled: false
}
},
mounted() {
const button = this.$el.querySelector('button');
const $this = this;
new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type == "attributes") {
$this.disabled = button.disabled;
}
});
}).observe(button, {
attributes: true
});
},
methods: {
executaAlgo() {
if (this.disabled) return;
alert('Clicado!');
}
}
})p {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccf;
display: inline-block;
}<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script><divid="app">
<button class="actAplicarTodosFiltros" :disabled="disabled">Aplicar</button>
<ul>
<li v-on:click="executaAlgo"><a href="#">Vendas</a></li>
</ul>
</div>
<p id="toggle">Clica aqui para desabilitar o botão sem Vue.js</p> You can mix external codes with no problem with Vue.js. instances. See the example I made, I created a variable called condicao out of Vue and associated it in the Vue instance. When you do this, the external variable is transformed into two-way databind.
Once the two-way databind is created, you can use external functions to manipulate this data, including when it is changed, the Vue recognizes and changes the component without any problem.
Also create a function to validate the button, in it you disable or enable according to the conditions of the external variable.
Follow the code below:
var condicao = {
opcao1: false,
opcao2: false,
opcao3: false,
};
function habilitarBotaoComFuncaoExterna() {
condicao.opcao1 = true;
condicao.opcao2 = true;
condicao.opcao3 = true;
}
function desabilitarBotaoComFuncaoExterna() {
condicao.opcao1 = false;
condicao.opcao2 = false;
condicao.opcao3 = false;
}
new Vue({
el: "#app",
data: {
aba: 1,
condicao: condicao,
},
methods: {
verificaCondicao: function() {
return !!this.condicao.opcao1 && !!this.condicao.opcao2 && !!this.condicao.opcao3;
},
fazAlgumaCoisa: function() {
console.log('Botão clicado, faz alguma coisa...');
},
trocarDeAba: function($event, aba) {
if (!this.verificaCondicao()) {
console.log('Habilite opções para prosseguir com a troca de guia.');
return; // Cancela a ação pois não foi atendida
}
// Troca de aba
this.aba = aba;
}
}
});<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script><divid="app">
<div>
<div>
<a href="#" v-on:click.prevent="trocarDeAba($event, 1)">Aba 1</a>
<a href="#" v-on:click.prevent="trocarDeAba($event, 2)">Aba 2</a>
<a href="#" v-on:click.prevent="trocarDeAba($event, 3)">Aba 3</a>
</div>
<div>
<div v-if="aba == 1">Conteúdo Aba 1 ******************</div>
<div v-if="aba == 2">Conteúdo Aba 2 ------------------</div>
<div v-if="aba == 3">Conteúdo Aba 3 ##################</div>
</div>
<div v-if="verificaCondicao()">
<h4>Agora você pode clicar nas abas</h4>
</div>
<div v-else>
<h4>Marque as opções para poder alterar de guia</h4>
</div>
</div>
<hr />
<div>
<button v-on:click="fazAlgumaCoisa()" class="actAplicarTodosFiltros" :disabled="!verificaCondicao()">
Opção com Condições
</button>
</div>
<ul>
<li><input v-model="condicao.opcao1" type="checkbox"> Condição 01</li>
<li><input v-model="condicao.opcao2" type="checkbox"> Condição 02</li>
<li><input v-model="condicao.opcao3" type="checkbox"> Condição 03</li>
</ul>
</div>
<div>
<button onClick="habilitarBotaoComFuncaoExterna()">Fora do Vuejs - Habilitar</button>
<button onClick="desabilitarBotaoComFuncaoExterna()">Fora do Vuejs - Habilitar</button>
</div>