Question initialement publiée (en espagnol) sur es.stackoverflow.com par José :
J'ai vu l'exemple en JavaScript, et oui, cela fonctionne et tout mais comme je peux le faire dans vue.js , j'essaye depuis un moment et cela ne fonctionne pas. Désolé pour le dérangement.
new Vue({ el: '#app', data: { name: 'Hello Vue.js!', defaultName: null }, mounted() { this.defaultName = this.name; }Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div> <select name='id_categoria' id='id_categoria' > <option value="1" selected>Clientes</option> <option value="2">Empresas</option> <option value="3">Personas</option> </select> <input id="d" disabled="disabled" type="text" value="test"> </div>HTML
$(document).ready(function() { $('#id_categoria').change(function(e) { if ($(this).val() === "1") { $('#d').prop("disabled", true); } else { $('#d').prop("disabled", false); } }) });
Je sais que c'est bizarre que je veuille manipuler directement le DOM lorsque vous utilisez Vue; Je laisse généralement le cadre faire ça, ce serait une solution possible
Bien sûr, si c'est une possibilité, vous devez profiter de la nature réactive de Vue basée sur les données, car s'attaquer avec le DOM est toujours délicat.
La solution serait simplement de créer une autre variable et de la remplir sur
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ name }}</p>
<input type="text" v-model="name"/>
<button type="submit" :disabled="name == defaultName">Submit</button>
</div>
>
3 Réponses :
Vous trouverez ci-dessous un fichier de modèle de vue utilisant v-model au lieu de combiner jQuery
<template>
<div>
<select v-model="id_categoria">
<option value="1" :selected="id_categoria === 1">Clientes</option>
<option value="2" :selected="id_categoria === 2">Empresas</option>
<option value="3" :selected="id_categoria === 3">Personas</option>
</select>
<input id="d" :disabled="id_categoria === 1" type="text" value="test">
</div>
</template>
<script>
export default {
data() {
return {
id_categoria: 1,
};
},
}
</script>
Essaye ça:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select @change="onChangeSelect($event)">
<option v-for="(option, index) in options" :key="index" :value="option.value">
{{ option.content }}
</option>
</select>
<input :disabled="inputDisabled" type="text" value="test">
</div>new Vue({
el: "#app",
data: {
options: [
{ content: 'Clientes', value: 1 },
{ content: 'Empresas', value: 2 },
{ content: 'Personas', value: 3 }
],
inputDisabled: true
},
methods: {
onChangeSelect(e) {
this.inputDisabled = (e.target.value == 1)
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<select v-model="selectedOption">
<option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.content }}</option>
</select>
<input :disabled="inputDisabled" type="text" v-model="selectedOption">
</div>new Vue({
el: "#app",
data: {
options: [
{ content: 'Clientes', value: 1 },
{ content: 'Empresas', value: 2 },
{ content: 'Personas', value: 3}
],
selectedOption: '',
},
computed: {
inputDisabled() {
return this.selectedOption === 2;
}
}
})
C'est parce que vous essayez d'utiliser des méthodes jQuery au lieu d'utiliser Vue. Les deux ne se mélangent pas très bien (il est très rare que vous souhaitiez manipuler directement le DOM lorsque vous utilisez Vue; généralement, vous laissez le framework le faire.) Si vous avez besoin d'aide pour faire fonctionner ce genre de chose dans Vue, vous devez inclure votre Code Vue dans la question, pas seulement le jQuery.
Avec Vue, vous n'utiliserez pas de fonction
document.ready, vous aurez un objet javascript qui est votre modèle , et vos contrôles de sélection et d'entrée seront liés aux éléments de ce modèle. Voir Liaisons d'entrée de formulaire pour une présentation. Votre<input>ressemblera probablement à quelque chose comme<input type="text" id="d" :disabled="categoria==1">Copié sans attribution de habilitar / deshabilitar un input con un select