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

有一个选项可以显示

更多

文本或

更少

，但是

@单击

事件适用于所有

元素

，所有元素都显示所有文本

我理解，我需要传递一些值来标识单个元素，该值不会应用于所有元素，但此时会卡住，需要帮助

HTML:

数组值：

如何使方法仅适用于单个元素

---

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

创建一个对象来保存

readMore

切换的散列，每个项目一个：

数据：（）=>({
阅读更多：{}，
}),

这些键将是项目id。在模板中测试这些键，并通过传递该id在按钮中设置它们：

{{script.script_content.substring（02000）+.“}
{{script.script_content}
显示更多
少展示

并通过传递项目id并进行切换，在

方法中设置值：

方法：{
showMore（id）{
this.$set（this.readMore，id，true）；
},
无显示（id）{
this.$set（this.readMore，id，false）；
},
}
尝试只创建一个
和一个带有
toggle（）
函数onclick的按钮，它们可以将文本版本更改为显示，（完整或剪切）谢谢。你能用JSFIDLE做个例子吗？谢谢，但我在点击按钮时遇到一个错误：“ReferenceError:Vue未定义”。哦，使用
这个。$set
仍然切换所有元素。修复了它！方法中传递的值应该是ID，而不是键，因为有些键具有相同的值。再次感谢！编辑。祝你有美好的一天！
        <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>

data: () => ({
       readMore: false,
    }),
    methods: {
        showMore() {
            this.readMore = true;
        },
        showLess() {
            this.readMore = false;
        },