vue.js - modifier le texte dans un bouton après un événement
Je suis en train de jouer avec vue.js à des fins d'apprentissage constitué de différents composants, l'un d'eux étant un classique pour faire la liste. Pour l'instant, tout est au sein d'un composant.
Je veux modifier le texte d'un bouton après c'est cliqué pour masquer un élément de "masquer" pour "montrer" - je vais à ce propos par la fixation d'un texte de l'objet de données, puis de le changer dans une fonction.
Voir ci-dessous:
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
<input type="text" id="list-input">
<input type="submit" id="list-submit" v-on:click="addItem">
<span id="error" style="color: red; display: none;">Please Enter Text</span>
<ul>
<todoitem></todoitem>
<todoitem></todoitem>
<todoitem></todoitem>
</ul>
<h2 v-if="seen">SEEN</h2>
<button id="hide-seen" v-on:click="toggleSeen">{{ button.text }}</button>
</div>
<script type="text/javascript">
//components
Vue.component('todoitem', {
template: "<li>Test Item</li>"
})
//app code
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Sample Item 1' },
{ text: 'Sample Item 2' },
{ text: 'Sample Item 3' }
],
button: [
{ text: 'Hide'}
],
seen: true
},
methods: {
addItem: function() {
let item = document.getElementById("list-input").value;
let error = document.getElementById("error");
if (item == "") {
error.style.display = "block";
} else {
app.todos.push({ text: item });
error.style.display = "none";
}
},
toggleSeen: function() {
app.seen = false
app.button.push({ text: 'Show' });
}
}
})
</script>
De façon inattendue, le bouton est blanc sur les deux masquer et afficher des etats. Étant nouveau vue, cela semble être une étrange façon d'aborder la chose. Modifie les données dans ce contexte d'une mauvaise pratique? Je ne comprends pas comment résoudre ce problème, comme j'ai pas d'erreur dans ma console.
- Pourquoi votre
button
de données de la propriété d'un tableau?
Vous devez vous connecter pour publier un commentaire.
Ici vous avez votre code dans un snipplet.
J'ai changer votre bouton par un objet ordinaire au lieu d'un tableau et petite adaptation de la méthode toggleSeen.
JS:
HTML:
app.seen = !app.seen
pouvez-vous expliquer ce qui se passe là-bas? Si vous êtes simplement à la définition d'une condition contraire sur chaque événement? J'ai lu que comme app.vu est attribué à l'opposé de la condition est que l'essentiel, c'?boolean
valeur, donc est égal à true ou false.!
est l'opérateur à l'inverse l'état de résultat. Si l'état de résultat est true, false est de retour et si l'état de résultat est false, true est de retour. C'est même le faire si(app.vu == true) { app.vu = false; } else { app.vu = true; }