Comment désactiver l'entrée conditionnelle dans vue.js
J'ai une entrée:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
et dans mon composant Vue.js, j'ai:
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..
validated étant un boolean, il peut s'agir de 0 ou de 1, mais quelle que soit la valeur stockée dans la base de données, mon entrée est toujours désactivée.
J'ai besoin que l'entrée soit désactivée si false, sinon elle devrait être activée et modifiable.
Mise à jour:
En faisant cela toujours active l'entrée (peu importe que j'ai 0 ou 1 dans la base de données):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
En faisant cela toujours désactivé l'entrée (peu importe que j'ai 0 ou 1 dans la base de données):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">
Pour supprimer l'accessoire désactivé, vous devez définir sa valeur sur false. Cela doit être la valeur booléenne pour false, pas la chaîne 'false'.
Ainsi, si la valeur de validated est un 1 ou un 0, définissez conditionnellement le prop disabled en fonction de cette valeur. Par exemple.:
<input type="text" :disabled="validated == 1">
vous pouvez avoir une propriété calculée qui renvoie un booléen en fonction des critères dont vous avez besoin.
<input type="text" :disabled=isDisabled>
puis mettez votre logique dans une propriété calculée ...
computed: {
isDisabled() {
// evaluate whatever you need to determine disabled here...
return this.form.validated;
}
}
Pas difficile, vérifiez ceci.
<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="disabled">
Votre attribut disabled nécessite une valeur booléenne:
<input :disabled="validated" />
Remarquez que j’ai seulement vérifié si validated - Cela devrait fonctionner comme 0 is falsey ... e.g
0 is considered to be false in JS (like undefined or null)
1 is in fact considered to be true
Pour être très prudent, essayez: <input :disabled="!!validated" />
Cette double négation transforme la valeur falsey ou truthy de 0 ou 1 en false ou true
ne me crois pas? allez dans votre console et tapez !!0 ou !!1 :-)
De plus, pour vous assurer que votre numéro 1 ou 0 apparaît définitivement sous forme de nombre et non de chaîne '1' ou '0' pré-pendez la valeur vérifiée avec un + eg <input :disabled="!!+validated"/> ceci transforme une chaîne d'un nombre en un nombre eg
+1 = 1 +'1' = 1 Comme David Morrow a dit plus haut, vous pouvez mettre votre logique conditionnelle dans une méthode - cela vous en donne plus lisible code - il suffit de sortir de la méthode la condition que vous souhaitez vérifier.
Vous pouvez manipuler l'attribut :disabled dans vue.js.
Il acceptera un booléen, s'il s'agit de true, alors l'entrée est désactivée, sinon elle sera activée ...
Quelque chose comme structuré comme ci-dessous dans votre cas par exemple:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">
Lisez aussi ceci ci-dessous:
Désactivation conditionnelle des éléments d'entrée via une expression JavaScript
Vous pouvez désactiver conditionnellement les éléments d'entrée inline avec une expression JavaScript. Cette approche compacte fournit un moyen rapide d'appliquer une logique conditionnelle simple. Par exemple, si vous devez uniquement vérifier la longueur du mot de passe, vous pouvez envisager de procéder de la sorte.
<h3>Change Your Password</h3>
<div class="form-group">
<label for="newPassword">Please choose a new password</label>
<input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>
<div class="form-group">
<label for="confirmPassword">Please confirm your new password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>
Vous pouvez créer une propriété calculée et activer/désactiver tout type de formulaire en fonction de sa valeur.
<template>
<button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
export default{
computed: {
clickable() {
// if something
return true;
}
}
}
</script>
Essaye ça
<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms' /> Click me to enable
</label>
</p>
<input :disabled='isDisabled'></input>
</div>
vue js
new Vue({
el: '#app',
data: {
terms: false
},
computed: {
isDisabled: function(){
return !this.terms;
}
}
})
Peut utiliser cette condition d'ajout.
<el-form-item :label="Amount ($)" style="width:100%" >
<template slot-scope="scoped">
<el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
</template>
</el-form-item>
Basculer l'attribut de l'entrée désactivé était étonnamment complexe. Le problème pour moi était double:
(1) N'oubliez pas: l'attribut "désactivé" de l'entrée est PAS un booléen attribut.
La simple présence de l'attribut signifie que l'entrée est désactivée.
Cependant, les créateurs de Vue.js ont préparé cette ... https://vuejs.org/v2/guide/syntax.html#Attributes
(Merci à @connexo pour cela ... Comment ajouter un attribut désactivé dans le texte de saisie dans vuejs? )
(2) De plus, il y avait un problème de réinterprétation du timing DOM que j'avais. Le DOM ne se mettait pas à jour lorsque j'ai essayé de revenir en arrière.
Dans certaines situations, "le composant ne sera pas immédiatement rendu à nouveau. Il sera mis à jour lors du prochain" tick "."
Depuis les documents Vue.js: https://vuejs.org/v2/guide/reactivity.html
La solution était d'utiliser:
this.$nextTick(()=>{
this.disableInputBool = true
})
Plus complet exemple de flux de travail:
<div @click="allowInputOverwrite">
<input
type="text"
:disabled="disableInputBool">
</div>
<button @click="disallowInputOverwrite">
press me (do stuff in method, then disable input bool again)
</button>
<script>
export default {
data() {
return {
disableInputBool: true
}
},
methods: {
allowInputOverwrite(){
this.disableInputBool = false
},
disallowInputOverwrite(){
// accomplish other stuff here.
this.$nextTick(()=>{
this.disableInputBool = true
})
}
}
}
</script>
Gardez à l'esprit que les ES6 Sets/Maps ne semblent pas être réactifs pour autant que je sache, au moment de la rédaction.