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

Question

在"卡片文本"类中，它调用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>

Answer 1

试试下面的方法：

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