[Vuejs]-Inserting of cols (Vue/Javascript function) in Bootstrap row, for loop not working

by

0👍

✅

Update I fixed this now, it was fairly simple didn’t need a loop, just the conditional statement in the saveSwatch function

// Conditional statement to check if swatch exists before insertion
      let swatch = document.querySelector('.row');
      let element = document.getElementById("bg-gradient");
      //If it isn't "undefined" and it isn't "null", then it exists.
      if(typeof(element) != 'undefined' && element != null) {
        swatch.appendChild(newSwatch);
        gradDiv.style.backgroundImage = gradient;
        textDiv.innerHTML = `<h5>${hexValues}</h5><p>${hexValues}</p>`;
        } else {
        // First swatch in first row.
        swatch.appendChild(newSwatch);
        gradDiv.style.backgroundImage = gradient;
        textDiv.innerHTML = `<h5>${hexValues}</h5><p>${hexValues}</p>`;
       }
    },

This inserts the first and subsequent swatches OK.

I still have a small problem on empty row though, it inserts the empty vales, so trying a checkSwatch function which I cant get work yet, to run at the start of saveSwatch function on click, its below.

 checkSwatch() {
        let swatch = document.querySelector('.row');
          if(swatch.children <= 0) {
             console.log("Check Swatch Still  Works")
          }
        console.log("Check Swatch Works")
    },
      saveSwatch() {
         this.checkSwatch()
      console.log("Save Works");
      this.createSwatch();
    },

Cant get the conditional right on this one I just want to stop it inserting anything if there is no gradient set.

Couldn’t see the wood for the trees on this one!. The target div is a bootstrap row, so EVERY swatch is a children, and they are all empty before insertion, so a for loop and incrementing is not needed! Just need a check to stop insertion of a col with no contents ie the gradient.

Any tips welcome.

Thanks

0👍

I’m sorry, but you still haven’t provided enough detail. Are you trying to create html like this?

<div class="container-fluid bg-3 text-center">
 <h3>Your Gradients</h3><br>
 <div class="row">
  <!-- swatch #1 -->
  <div class="col-md-3">
   <div id="bg-gradient">...</div>
  </div>
  <!-- swatch #2 -->
  <div class="col-md-3">
   <div id="bg-gradient">...</div>
  </div>
  <!-- swatch #3 -->
  <div class="col-md-3">
   <div id="bg-gradient">...</div>
  </div>
  <!-- swatch #4 -->
  <div class="col-md-3">
   <div id="bg-gradient">...</div>
  </div>
 </div>
 <div class="row">
  <!-- swatch #5 -->
  <div class="col-md-3">
   <div id="bg-gradient">...</div>
  </div>
  ... more swatches ...
 </div>
</div>

Which will create a color swatch like this using a bootstrap grid?

#########################################
# Color 1 # Color 2 # Color 3 # Color 4 #
#########################################
# Color 5 # Color 6 # Color 7 # Color 8 #
#########################################

If you simplify the logic to add the newSwatch to this does it do what you want?

let swatch = document.querySelector('.row');
swatch.appendChild(newSwatch);
gradDiv.style.backgroundImage = gradient;
textDiv.innerHTML = '<h5>${hexValues}</h5><p>${hexValues}</p>';

I don’t see a need to check for the existence of an element with id = bg-gradient since you are adding it as part of the new swatch

Leave a comment