Vue3 - print function result into p vs print function to css section inside html tag

Question

let's say I have a very simple setup using data() and a function written in the methods part. With the function I'm returning a random number between 1 and 3, while the data contains an list of blog elements.

When displaying the result from randomNumber directly on the page using <p>{{randomNumber()}}</p> the value (1-3) get's printed. In my case I'm printing all posts from blogs using v-for on the parent div.

When however, trying to alter a css class with said number the number does not get printed. For this particular test I have made .g1, .g2 and .g3 with different style attributes. When inspecting the source code directly in the browser the .blog-thumb class has g{{randomNumber()}} as a second class.

i tried to call randomNumber() within the blogs item but I'm still unable to add the generated class to the css class section.

Thank you for your help or suggestions.

HTML:

<div class="col" v-for="blog in blogs" :key="blog.id">

    <div class="blog-thumb g{{randomNumber()}}"> <!-- DOES NOT GET PRINTED -->

      {{randomNumber()}} <!-- GETS PRINTED -->

      <p class="date">{{ blog.date }}</p>
    </div>
    
    <h2>{{blog.title}}</h2>
    <p>{{blog.content}}</p>
</div>

Vue:

methods : {
  randomNumber : function(){
    return Math.floor(Math.random() * 3+1);
  }
},

data() {
  return{
    blogs: [
      {
        id: '1',
        title: 'Amet consectetur adipisicing',
        date: 'March 3rd 2022',
        content: 'Lorem ipsum...'
      },
      {...}
    ]
  }
}

Answer 1

after fiddling with it for quite a while today I found this solution:

I changed the function to return a complete classname (in this case, g with a random number between 1 and 3)

randomNumber : function(){
    return 'g' + Math.floor(Math.random() * 3+1);
}

in the html part I added the v-bind to the class and passed the function (v-bind:class="randomNumber()")

<div class="col" v-for="blog in blogs" :key="blog.id">

    <div class="blog-thumb" v-bind:class="randomNumber()">
      <p class="date">{{ blog.date }}</p>
    </div>
    
    <h2>{{blog.title}}</h2>
    <p>{{blog.content}}</p>
</div>

with this, now every col blog-thumb class got another generated class added to it.