javascript - Truncate and show or hide the link text when clicking on "read more" link - Stack Overflow

admin管理员组

文章数量:1305282

I want to hide the text if limit exceed to 300 chars and show the link and if click on link then show the full content.

html:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

js:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. "
        "biliography":"Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous parison middletons at. Park we in lose like at no."
     },
      {
        "id": 1,
        "name": "Mckenzie Fuller",
        "informations":"Did shy say mention enabled through elderly improve."
        "biliography":" It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
      },
      {
        "id": 2,
        "name": "Oneal Clark",
        "informations": "-",
        "biliography":"-"

      }
    ]
               ..
            }
    methods:{

    toggleFlag: function () {
                    console.log('within toggleflag final');
                    this.toggle = !this.toggle;
                }

    },
     filters: {
                limitTo: function (value) {
                    if (!value) return '';
                    return value.substring(0, 300 )+ '...';
                }

---

edit : above code works but when click on "Read More" then it applied to all the columns of table wherever it shows the link.

example: Table Row's col1 , col5 are exceed the 300 chars and shows the "read more" link. when click on col1's "read more" link then it also applies to col5 and both the column's text are expanded for all the rows. It should apply to particular row and particular cell.

added datasource object. I added static datasource but it is dynamic and varies for number of columns.

I want to hide the text if limit exceed to 300 chars and show the link and if click on link then show the full content.

html:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

js:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. "
        "biliography":"Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous parison middletons at. Park we in lose like at no."
     },
      {
        "id": 1,
        "name": "Mckenzie Fuller",
        "informations":"Did shy say mention enabled through elderly improve."
        "biliography":" It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
      },
      {
        "id": 2,
        "name": "Oneal Clark",
        "informations": "-",
        "biliography":"-"

      }
    ]
               ..
            }
    methods:{

    toggleFlag: function () {
                    console.log('within toggleflag final');
                    this.toggle = !this.toggle;
                }

    },
     filters: {
                limitTo: function (value) {
                    if (!value) return '';
                    return value.substring(0, 300 )+ '...';
                }

---

edit : above code works but when click on "Read More" then it applied to all the columns of table wherever it shows the link.

example: Table Row's col1 , col5 are exceed the 300 chars and shows the "read more" link. when click on col1's "read more" link then it also applies to col5 and both the column's text are expanded for all the rows. It should apply to particular row and particular cell.

added datasource object. I added static datasource but it is dynamic and varies for number of columns.

• javascript
• html
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Sep 10, 2019 at 18:09 Boussadjra Brahim 1 asked Oct 9, 2018 at 19:56 user3711357user3711357 1,63588 gold badges3434 silver badges5959 bronze badges 9

• please provide your data object and template – Boussadjra Brahim Commented Oct 9, 2018 at 20:00
• Updated how I call. need to flip show/hide content if exceed the limit text. – user3711357 Commented Oct 9, 2018 at 20:09
• check my answer using the puted property – Boussadjra Brahim Commented Oct 9, 2018 at 20:20
• you need to be more explicit about what you want, you have two answers that have two different interpretations of what you want – Keith Nicholas Commented Oct 9, 2018 at 20:29
• It would be helpful to see example input and desired output. – Slotheroo Commented Oct 9, 2018 at 23:34

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 6

Using v-if
v-if="obj.informations.length > 300"

Example:

<div v-if="summary">
  {{ obj.informations | linitToDisplay(300) }}
  <a v-if="obj.informations.length > 300" @click="summary = false">Read more<a>
<div v-else>
  {{ obj.informations }}
</div>

But you'd probably write toggleSummary() method instead of the inline summary = false handler and maybe use puted property that reacts to summary instead of a filter.

You could use a puted property to handle that case and when you click on the link the whole link text will be shown :

EDIT

i suggest the following solution which built by altering your datasource and by modifying each cell in the mounted hook, "id":0 will be "id":{txt:0,toggled:true}, "informations":"..." will be "informations":{txt:"...",toggled:false} and so on. and when you click on a cell you will only modify its toggled property to false

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      toggle: false,
      link: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue eros, varius in massa vitae, ultrices fringilla eros',
      showAll: false,
      columns: ["id", "name", "informations", "biliography"],
      datasource: [{
          "id": 0,
          "name": "Christa Hansen",
          "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. ",
          "biliography": "Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous parison middletons at. Park we in lose like at no."
        },
        {
          "id": 1,
          "name": "Mckenzie Fuller",
          "informations": "Did shy say mention enabled through elderly improve.",
          "biliography": " It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
        },
        {
          "id": 2,
          "name": "Oneal Clark",
          "informations": "some info",
          "biliography": "some info"

        }
      ]

    }
  },
  puted: {
    trunc_link() {
      return this.link.substring(0, 30)
    }
  },
  methods: {

    toggleFlag: function(index, column) {
      this.datasource[index][column].toggled = true;
    },
    limitTo: function(value) {
      if (!value) return '';
      return value.substring(0, 50) + '...';
    }

  },
  mounted() {
    let d = [];
    d = this.datasource.map(item => {
      let o = {
        "id": {
          txt: item.id,
          toggled: true
        },
        "name": {
          txt: item.name,
          toggled: true
        },
        "informations": {
          txt: item.informations,
          toggled: false
        },
        "biliography": {
          txt: item.biliography,
          toggled: false
        },

      }
      return o;
    });

    this.datasource = d;
    //console.log(this.datasource)
  }
});

.readmore {
  color: #005faa!important;
  cursor: pointer;
}

<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <a href="#" v-if="!showAll" @click="showAll=true"> {{trunc_link}}...</a>
  <a href="#" v-else> {{link}}</a>
  <table class="table-striped">
    <tbody>
      <tr v-for="(row,index) in datasource">
        <td v-for="column in columns" class="wrap-break-word" v-show="true">

          <span v-if="row[column].txt.length >= 50  && row[column].toggled == false" v-html="limitTo(row[column].txt)">
                                    </span><a class="readmore" v-on:click="toggleFlag(index,column)" v-show="!row['isEditable'] && row[column].txt.length >= 50  && row[column].toggled == false">Read more</a>
          <span v-if="(row[column].txt.length < 50  || row[column].toggled == true)" v-html="row[column].txt">
                                    </span>

          <td>
      </tr>
    </tbody>
  </table>
</div>

本文标签： javascriptTruncate and show or hide the link text when clicking on quotread morequot linkStack Overflow