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

Question

可以选择显示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;
        },

数组值：

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

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

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