vue.js - change text within a button after an event
Here you have your code in a snipplet.
I change your button by a plain object instead of an array and small adaptation in method toggleSeen.
// 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 = !app.seen;
app.button.text = app.seen ? 'Hide' : 'Show';
}
}
});<script src="https://vuejs.org/js/vue.min.js"></script>
<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>You can achieve this by using refs in vuejs:
<body>
<div id = 'app'>
<button @click="changeState" ref="btnToggle">Hide</button>
<div v-show="show">
<h1>1 to 100</h1>
<p v-for="i in 100">{{i}}</p>
</div>
</div>
<script>
const app = new Vue({
el:'#app',
data: function(){
return{
show: true
}
},
methods: {
changeState: function(){
this.show = !this.show;
this.$refs.btnToggle.innerText = this.show?'Hide':'Show';
}
},
});
</script>
</body>