[Vuejs]-How Slice text and add Read More button in v-for loop

1👍

Try this below :

<template>
      <div class="container">
        <Modal
          v-if="showModal && GET_TRAILER.payload !== null"
          v-on:close="closeModal"
          :trailerAdress="GET_TRAILER.payload"
        ></Modal>
        <div>
          <div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
            <div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
              <img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
              <div class="card-body">
                <h5 class="card-title">{{movie.original_title}}</h5>

    ---------------------- Add this part ------------------------------

                <div class="card-text">
                 <p v-if="movie.readMore"> 
                   {{ movie.overview | limitDisplay }}
               <a v-if="movie.overview.length > 100" @click="toggleReadMore(obj.payload, movie.id, false)">Read More<a> 
                 </p>

                <p v-if="!movie.readMore">
                {{ movie.overview }}
                <a @click="toggleReadMore(true)">Read Less<a> 
                </p>
               </div>

    ---------------------------------------------------------------

                <div class="buttonPosition">
                  <button
                    v-on:click="OpenTrailerModal(movie.id)"
                    type="button"
                    class="btn btn-success"
                  >Watch Trailer</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button @click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
      </div>
    </template>

In your script add this in your methods and filters :

methods: {

    toggleReadMore(payload, movie_id, value){

    payload = payload.map(function(item){
          if(item.id == movie_id){
              item['readMore'] = value;
              return item
          }
   });
}

},

filters : {

limitDisplay: function(value) {
  return value.substring(0, 100) + "...";
}

}

Leave a comment