Inline invert boolean @click in Vue.js
I think it is possible to do without any methods
Add a Click Event to reverse the value of the boolean variable. Like this:
@click="showExtra = !showExtra"In your Script Data:
<script> export default { return { data() { showExtra: false } }}</script>
You are doing it wrong.<button v-on:click="toggle" type="button">Toggle</button>
In your script part:
data () { return { spanVisible: true }},methods: { toggle () { this.spanVisible = !this.spanVisible }}Note that data is declared this way if you are using Vue components. If you are using in file scripting, you will skip return
The key point of MVVM or MVC framework is model-driven.spanVisible is one property of your model. So you need update its value directly in every handler.