어레이의 VueJs에서 동적 '자세히 읽기' 버튼을 긴 텍스트로 설정하는 방법

어레이의 VueJs에서 동적 '자세히 읽기' 버튼을 긴 텍스트로 설정하는 방법

나는 얼마 전에 Vue JS를 배웠다.

그리고 나는 어떤 문제를 해결하는 데 몇 가지 문제가 있다.

이 경우 특정 객체에서 긴 텍스트를 숨기고 표시하는 이벤트를 만들어야 합니다.

내 지원서의 논리는 다음과 같다.

서버에 요청을 보냅니다.

나는 답을 얻었다.

그리고 Vuex 스토어에 씁니다.

또한 컴포넌트 출력에 게터 및 루프를 사용합니다.

만약 누군가 비슷한 상황에 처했다면, 저는 어떤 도움이라도 받을 수 있으면 고맙겠습니다.

이것은 내 코드의 일부입니다.

import {mapActions, mapGetters} from "vuex";


<v-list three-line v-for="(comment, index) in product.comments.data" :key="comment.id" class="mb-3">

    <v-list-item>
       <p v-if="!readMoreActivated">{{comment.description.slice(0, 200)}}<v-btn @click="activateReadMore(index, comment.description)" x-small text color="grey">Открыть</v-btn></p>
       <p v-if="readMoreActivated">{{comment.description}}</p>
    </v-list-item>
</v-list>



computed: {
        ...mapGetters("products", ["product"])

    },

methods: {
        activateReadMore(lineId, comment)
        {
            comment.findIndex((lineId) => {
                return comment.slice(1, comment.length)
            })
            // this.readMoreActivated = true
        },
    },

이건 정말 방법이 필요 없어!이 컴포넌트 코드를 확인해 주세요.또, 동작하고 있는 코드에도 링크합니다.

Vue의 가장 큰 장점 중 하나는 이벤트를 수동으로 실행하는 것이 아니라 상태 관리에 대해 머리를 싸매면 실제로 코드를 작성할 필요가 없다는 것입니다.

<template>
  <div id="app">
    <p>
      {{ formattedBody }}
      <button @click="showingFullText = !showingFullText">
        Read {{ showingFullText ? "Less" : "More" }}
      </button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showingFullText: false,
      body:
        "I am some text! Instead of being on the data object, though, I would be pulled from the store."
    };
  },

  computed: {
    formattedBody() {
      if (this.showingFullText) {
        return this.body;
      }

      return `${this.body.slice(0, 20).trim()}...`;
    }
  }
};
</script>

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

저는 이렇게 하고 싶어요.

Vue.component('ListItem', {
  props: {
    text: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showFullText: false,
    }
  },
  computed: {
    displayedText() {
      if (!this.showFullText) {
        return this.text.slice(0, 200)
      } else {
        return this.text
      }
    },
    readMoreText() {
      return this.showFullText ? 'less' : 'more'
    }
  },
  template: `
    <li>
      <div>
        {{ displayedText }}
      </div>
      <button
        @click="showFullText = !showFullText"
      >
        Read {{ readMoreText }}...
      </button>
    </li>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      textArray: [
        '1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin nunc sed finibus porttitor. Praesent elementum lacinia ullamcorper. Donec at pretium nisi, at mollis ante. Morbi maximus, sapien a mattis scelerisque, orci dui viverra turpis, at ultricies risus lectus sed justo. Donec venenatis ullamcorper odio, rutrum auctor leo vehicula ut.',
        '2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin nunc sed finibus porttitor. Praesent elementum lacinia ullamcorper. Donec at pretium nisi, at mollis ante. Morbi maximus, sapien a mattis scelerisque, orci dui viverra turpis, at ultricies risus lectus sed justo. Donec venenatis ullamcorper odio, rutrum auctor leo vehicula ut.',
        '3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin nunc sed finibus porttitor. Praesent elementum lacinia ullamcorper. Donec at pretium nisi, at mollis ante. Morbi maximus, sapien a mattis scelerisque, orci dui viverra turpis, at ultricies risus lectus sed justo. Donec venenatis ullamcorper odio, rutrum auctor leo vehicula ut.'
      ]
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ol>
    <list-item v-for="(text, i) in textArray" :key="i" :text="text" />
  </ol>
</div>

요점은 다음과 같습니다.

• a component목록 엔트리에 대해 작성됩니다.읽기 감소 및 읽기 증가 액션은 이 컴포넌트에만 "확정"되어 있습니다.
• 텍스트는 a입니다.prop각각에 대해서ListItem

언급URL : https://stackoverflow.com/questions/64972798/how-to-setup-dynamic-read-more-button-in-a-long-text-in-vuejs-in-array