javascript - 如何使用 vue.js 创建适用于单个元素的显示更多/更少按钮?
问题描述
有一个显示more
文本的选项,或less
,但该@click
事件适用于 allelements
并且所有元素显示所有文本。
我了解,我需要传递一些值来识别单个元素,该值不适用于所有元素,但目前卡住并会提供帮助。
HTML:
<tr v-for="script in scripts.slice(0, 5)">
<td>{{script.key}}</td>
<td v-if="!readMore">{{script.script_content.substring(0, 200) + ".."}}</td>
<td v-if="readMore">{{script.script_content}}</td>
<button @click="showMore" v-if="!readMore" class="btn btn-primary">Show more</button>
<button @click="showLess" v-if="readMore" class="btn btn-primary">Show less</button>
</tr>
Vue数据和方法:
data: () => ({
readMore: false,
}),
methods: {
showMore() {
this.readMore = true;
},
showLess() {
this.readMore = false;
},
数组值:
我怎样才能使方法仅适用于单个元素?
在这种情况下,不需要创建组件,因为这种情况只会在一个页面上使用。
解决方案
创建一个对象来保存一个readMore
切换散列,每个项目一个:
data: () => ({
readMore: {},
}),
键将是项目 ID。在模板中测试它们,并通过传递该 id 在按钮中设置它们:
<td v-if="!readMore[script.id]">{{script.script_content.substring(0, 200) + ".."}}</td>
<td v-if="readMore[script.id]">{{script.script_content}}</td>
<button @click="showMore(script.id)" v-if="!readMore[script.id]" class="btn btn-primary">Show more</button>
<button @click="showLess(script.id)" v-if="readMore[script.id]" class="btn btn-primary">Show less</button>
methods
并通过传递项目 ID 并切换它来设置值:
methods: {
showMore(id) {
this.$set(this.readMore, id, true);
},
showLess(id) {
this.$set(this.readMore, id, false);
},
}
推荐阅读
- python - 如何生成带有字符串元素后跟数字的python列表
- python - 根据相邻列名重命名 pd.DataFrame 中的列
- reactjs - textarea 上的 ref 属性;“没有超载匹配这个调用”
- python - 使用 itertuples() 遍历数据帧并读取下一行
- python - Selenium 和 Service Worker 离线模式
- jquery - 在用作源的 api 调用中发送标头
- python - 顺序 model.fit() 调用的最终历史对象是否准确?
- r - 在服务器中选择输入后按因子过滤数据帧
- javascript - nodejs中的socket.on里面的socket.on服务器端api socket.io
- reactjs - 将本机多个 ref 反应到全局组件