如何使用 vue.js 创建适用于单个元素的显示更多/更少按钮？

Posted 2023-02-23

【中文标题】如何使用 vue.js 创建适用于单个元素的显示更多/更少按钮？

【英文标题】：How to create a show more/less button which applies to individual element with vue.js?

【发布时间】：2020-08-06 10:21:02

【问题描述】：

可以选择显示more 文本或less，但@click 事件适用于所有elements，并且所有元素都显示所有文本。

我了解，我需要传递一些值来识别单个元素，该值不适用于所有元素，但目前卡住并会提供帮助。

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

数组值：

我怎样才能使方法只适用于单个元素？

在这种情况下，不需要创建组件，因为这种情况只会在一个页面上使用。

【问题讨论】：

尝试只创建一个<td> 和一个带有toggle() 功能onclick 的按钮，用于更改要显示的文本版本，（完整或剪切）

谢谢。你能用jsfiddle举个例子吗？

【参考方案1】：

创建一个对象来保存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);
    ,

【讨论】：

谢谢，但我在单击按钮时收到错误消息：“ReferenceError: Vue is not defined”。

糟糕，使用this.$set

仍然切换所有元素。

修复了！在方法中传递的值应该是一个 ID，而不是键，因为有些键具有相同的值。再次感谢！

已编辑。祝你有美好的一天！