Embedding javascript into html in Vue

Question

So I've linked Firebase to my Vue project and now I want to display a portion of the content of a blog. I know that to display the entire blog content I can simple write the following within an html tag.

{{blogs[0].content}}

My question is, how do you display just a portion of it, for example the first 100 characters of the content? I've tried,

{{blogs[0].content[:100]}}

However that gives a compile error.

Also I have a second question, I have using bootstrap with Vue. More specifically the card cascade. Below shows a section of the bootstrap card cascade.

<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>

I want the title to be the title of blogs[0] but the way I have done it above just prints out "blogs[0].title"

Add a colon and quotation marks: :title="blogs[0].title", or use v-bind: — Stephen Thomas
– Stephen Thomas, Commented May 29, 2019 at 0:14

Mitro · Accepted Answer · 2019-05-29 00:13:25Z

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>

answered May 29, 2019 at 0:13

Mitro

2782 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adriano Over a year ago

I like this answer, as it keeps the separation of concern between the view (within <template>) and the logic (within the methods:{}).

tony19 · Accepted Answer · 2022-07-15 00:58:23Z

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

edited Jul 15, 2022 at 0:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 29, 2019 at 0:40

José Silva

4113 silver badges13 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 00:46:48Z

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>

edited Jul 16, 2022 at 0:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 29, 2019 at 1:51

Reuel Ribeiro

1,49915 silver badges24 bronze badges

Collectives™ on Stack Overflow

Embedding javascript into html in Vue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related