Full-Stack Vue.js 2 and Laravel 5

Expandable text

We created functionality back in Chapter 2, Prototyping Vuebnb, Your First Vue.js Project, to allow the About text to be partially contracted when the page loads and expanded to its full length by clicking a button. Let's abstract this functionality into a component as well:

$ touch resources/assets/components/ExpandableText.vue

Move all the markup, configuration, and CSS into the new component. Note that we use a slot for the text content.

resources/assets/components/ExpandableText.vue:

<template>
  <div>
    <p :class="{ contracted: contracted }">
      <slot></slot>
    </p>
    <button v-if="contracted" class="more" @click="contracted = false">      + More    </button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        contracted: true ...