Full-Stack Vue.js 2 and Laravel 5

Event listener

We now want to remove the contracted class automatically when the user clicks the More button. To do this job, we'll use the v-on directive, which listens to DOM events with a click argument.

The value of the v-on directive can be an expression that assigns contracted to false.

index.html:

<div class="about">
  <h3>About this listing</h3>
  <p v-bind:class="{ contracted: contracted }">{{ about }}</p>
  <button class="more" v-on:click="contracted = false">+ More</button>
</div>