[Vuejs]-Embedding javascript into html in Vue

by

3👍

you can add a method that will get a portion of blog content.

methods: {
       getContentPortion (content, maxSize) {
          if(maxSize >= content.length) {
             return content;
           }

       return `${content.substr(0, maxSize)}...`;
    }
  },

And then you can update your template with:

<b-card
        title= blogs[0].title
        img-src="https://placekitten.com/g/400/450"
        img-alt="Image"
        img-top
      >
        <b-card-text>
          {{ getContentPortion(blogs[0].content, 10) }}
        </b-card-text>
</b-card>
👤Mitro

1👍

<b-card
        :title=blogs[0].title
        img-src="https://placekitten.com/g/400/450"
        img-alt="Image"
        img-top
      >
        <b-card-text>
          {{blogs[0].content[:10]}}
        </b-card-text>
</b-card>

This should work. Use v-bind to use JS in HTML tags.

See more in the docs: https://v2.vuejs.org/v2/guide/class-and-style.html

👤José Silva

1👍

I’d recommend creating a filter.

Vue.filter('ellipse', function (value, size) {
  if (!value) return ''
  if (value.length < size) return value;

  return `${value.substr(0, size)}...`;
})

Then you can easily reuse throughout your code:

{{ message | ellipse(50) }}
<p v-text="message | ellipse(50)"></p>
👤Reuel Ribeiro

Leave a comment