Replace values in an array dynamically

Question

I have a scenario like this. Say: let a = [2,5,6] and let b = [1,2,3,4,5,6,7,8]. Array b is displayed in boxes and revealed when one clicks any of the boxes. What I am trying to do is, when one clicks on any box and the value is the same as any value in array a, I replace the value with other unique values and if they're not the same I display as it is. e.g. If I click a box that has a value of 2 or 5 or 6 i replace the values with the other values.

A minimal example is:

new Vue({
  el: "#app",
  data: {
    a: [2,5,6],
    b: [1,2,3,4,5,6,7,8]
  },
  methods: {
    replaceNumber() {
      // function to replace the values
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.numbers {
  display: flex;
}
li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Numbers:</h2>
  <br/>
  <ul class="numbers">
    <li v-for="num in a">
      {{num}}
    </li>
  </ul>
  <br/>
  
  <template>
    <button @click="replaceNumber" v-for="number in b">
    {{ number }}
    </button>
  </template>
</div>

Please post a minimal reproducible example of your attempt and say specifically where you're stuck. People will be glad to help. — palaѕн
– palaѕн, Commented Apr 2, 2020 at 12:04
looks like you're nearly there, replaceNumber needs to be passed 'number' as an argument. Also remember that arrays need to be manipulated in a specific way to maintain reactivity, see: vuejs.org/v2/guide/reactivity.html#For-Arrays — coedycode
– coedycode, Commented Apr 2, 2020 at 12:36

Caleb Rotich · Accepted Answer · 2020-04-02 12:38:12Z

1

Use indexOf() to locate the position of the element you want to replace.

Then use splice() together with the index you got to remove that element.

Then use splice() again to insert a new value to the same index.

Check the documentation of each method above to understand their syntax.

answered Apr 2, 2020 at 12:38

Caleb Rotich

6536 silver badges11 bronze badges

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

Comments

Manikant Gautam · Accepted Answer · 2020-04-02 13:11:33Z

You can try with random numbers if found in first array i.e a

var a = [2,5,6] 
 var b = [1,2,3,4,5,6,7,8]
 a.forEach(function(e){
    $("#aDiv").append(`<h2>${e}</h2>`);
 })
 
  b.forEach(function(e){
    $("#bDiv").append(`<h2 class="seconddiv">${e}</h2>`);
 });
 
 $(".seconddiv").on('click',function(){
    let val= $(this).html();
    if(a.includes(parseInt(val))){
      var  uniqueNo = 0;
       do {
          uniqueNo=getRandomInt(0,10);
       }
        while (a.includes(parseInt(uniqueNo)));
       $(this).html(uniqueNo);
    }
 })
 
let getRandomInt= (x,y)=>x+(y-x+1)*crypto.getRandomValues(new Uint32Array(1))[0]/2**32|0

#aDiv,#bDiv{
 color:yellow;
 background-color:black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maindiv">
     <div   id="aDiv">
  
     </div>
    <div id="bDiv" style="margin-top:50px;">
  
     </div>
</div>

Collectives™ on Stack Overflow

Replace values in an array dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related