Although it may seem like a simple example, I am just starting to learn Vue.
I believe the error is occurring where I have indicated. I am attempting to call a function from a computed method. There doesn't seem to be an issue when writing the code directly in v:bind, but once I pass it through a function, it gives me an error. I understand that functions are called as func() from method, but I suspect there might be a different syntax when calling them from computed.
<body>
<div class="container">
<hr>
<div class="sample">
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value">
<hr>
<h2>Hello, {{ name }}</h2>
<input type="button" value="Click on it" v-on:click="addNumber()">
<hr>
<div v-for="num in numbers">
{{ num }}
</div>
<input type="button" v-on:click="show" v-bind:title="btnText" > //I'M SURE ERROR IS HERE
<h2 v-show="showH2">check hide</h2>
</div>
<div></div>
<script>
let sample = new Vue({
el: '.sample',
data:
{
showH2: true,
name: '12344',
numbers: []
},
methods:
{
addNumber()
{
let num = Math.floor(Math.random() * 11) - 5;
this.numbers.push(num);
}
},
computed:
{
btnText()
{
return this.showH2 ? 'Hide' : 'Show';
},
sum()
{
let sum = 0;
this.numbers.forEach((el) => sum += el);
return sum;
},
show()
{
this.showH2 = !this.showH2;
}
}
});
</script>
</body>
</html>