Duplicate an html tag with VueJs

Question

I am looking to clone this tag the number of times there is a day in the month:

<td class="day noclass" v-on:click="workedDay" :class="{ active: isActive }"></td>

I tried with that:

let tdCells;
  for ( let j = 1; j <= this.nbDaysInMonth; j++)
  {
    tdCells = document.createElement("td");
    tdCells.setAttribute("class", "dayOfMonth");
    tdCells.setAttribute(":class", "{ active: isActive }");
    tdCells.setAttribute("v-on:click", "workedDay");
    document.getElementsByClassName('cells')[0].appendChild(tdCells);
  }

but it creates html attribute but not usable with VueJs

What you're looking for is v-for. I suggest you read the basic vuejs introduction vuejs.org/v2/guide. — Philip Feldmann
– Philip Feldmann, Commented Apr 11, 2018 at 7:47
This is not how VueJS works.You shouldn't touch DOM directly, everything should go over the model aka data object. — Belmin Bedak
– Belmin Bedak, Commented Apr 11, 2018 at 7:53

aleem md · Accepted Answer · 2018-04-11 07:51:42Z

2

You can use v-for to loop through object

<tr v-for="day in nbDaysInMonth">
    <td class="day noclass" v-on:click="workedDay" :class="{ active: isActive }"></td>
</tr>

answered Apr 11, 2018 at 7:51

aleem md

721 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Duplicate an html tag with VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related