如何用vue.js创建适用于单个元素的显示更多/更少按钮？
如何用vue.js创建适用于单个元素的显示更多/更少按钮？
提问于 2020-04-23 15:10:56
可以选择显示more text或less，但@click事件适用于all elements和all元素显示all text。
我知道，我需要传递一些值来标识单个元素，该值不会应用于所有元素，但目前仍然有效，可能会有所帮助。
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;
},数组值：
如何使方法仅适用于单个元素？
在这种情况下，不需要创建组件，因为这种情况只在一个页面上使用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-23 15:28:35
创建一个对象来保存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>并通过传递项目id并对其进行切换来设置methods中的值：
methods: {
showMore(id) {
this.$set(this.readMore, id, true);
},
showLess(id) {
this.$set(this.readMore, id, false);
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61381344
复制相关文章
相似问题
腾讯云开发者
