如何在数组中的 VueJs 中的长文本中设置动态“阅读更多”按钮

Question

我不久前开始学习Vue JS

\n

我在解决某些问题时遇到一些问题

\n

在这种情况下，我需要创建一个事件来隐藏和显示特定对象中的长文本

\n

我的应用逻辑如下

\n

我正在向服务器发送请求

\n

我得到答案

\n

然后我将其写入 Vuex 存储

\n

并在组件中使用 getter 和循环进行输出

\n

如果有人遇到类似的情况，我将不胜感激。

\n

这是我的代码的一部分

\n

import {mapActions, mapGetters} from "vuex";\n\n\n<v-list three-line v-for="(comment, index) in product.comments.data" :key="comment.id" class="mb-3">\n\n    <v-list-item>\n       <p v-if="!readMoreActivated">{{comment.description.slice(0, 200)}}<v-btn @click="activateReadMore(index, comment.description)" x-small text color="grey">\xd0\x9e\xd1\x82\xd0\xba\xd1\x80\xd1\x8b\xd1\x82\xd1\x8c</v-btn></p>\n       <p v-if="readMoreActivated">{{comment.description}}</p>\n    </v-list-item>\n</v-list>\n\n\n\ncomputed: {\n        ...mapGetters("products", ["product"])\n\n    },\n\nmethods: {\n        activateReadMore(lineId, comment)\n        {\n            comment.findIndex((lineId) => {\n                return comment.slice(1, comment.length)\n            })\n            // this.readMoreActivated = true\n        },\n    },\n

\n

Answer 1

你真的不需要\xe2\x80\x99甚至不需要这个方法！看一下它的组件代码，I\xe2\x80\x99ll 还链接到它的工作 Codepen。

\n

Vue 最伟大的事情之一是，一旦您专注于状态管理，而不是手动驱动事件，您实际上需要编写的代码非常少。

\n

<template>\n  <div id="app">\n    <p>\n      {{ formattedBody }}\n      <button @click="showingFullText = !showingFullText">\n        Read {{ showingFullText ? "Less" : "More" }}\n      </button>\n    </p>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      showingFullText: false,\n      body:\n        "I am some text! Instead of being on the data object, though, I would be pulled from the store."\n    };\n  },\n\n  computed: {\n    formattedBody() {\n      if (this.showingFullText) {\n        return this.body;\n      }\n\n      return `${this.body.slice(0, 20).trim()}...`;\n    }\n  }\n};\n</script>\n

\n

https://codepen.io/barneychampaign/pen/KKMOZqL

\n