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?
InformationsquelleAutor kawnah | 2017-10-04