时间戳

首页 > 解决方案 > 如何在 v-for 循环中切片文本并添加阅读更多按钮

javascript - 如何在 v-for 循环中切片文本并添加阅读更多按钮

问题描述

在“卡片文本”类中，它从 Json 文件中调用文本，但它太长了我想剪切文本并添加动作，点击“阅读更多”按钮，但只有点击的卡片才能做出反应，某人某事? 

<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>
            <p class="card-text">
              {{movie.overview}}
            </p>

            <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>

标签： javascriptvue.js

解决方案

在下面试试这个：

<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>

在您的脚本中将其添加到您的方法和过滤器中：

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) + "...";
}

}

推荐阅读