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

Question

可以选择显示更多文本或更少，但是@click事件适用于所有元素 和 all 元素显示所有文本。

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

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

数组值:

如何让一个方法只适用于单个元素？

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

Answer 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);
    },
}