How to @click change the data in the array with Vuejs

Question

I have a table with two-button Inch and CM, and I want to change the numbers from Inch to CM on click, Please can someone teach me how to do it 🙏🙏🙏

 data() {
        return {

          guild_size_inch: [
            {
              size: "S",
              chest: "92",
              length: "71"
            },
            {
              size: "M",
              chest: "40",
              length: "29"
            },
            {
              size: "L",
              chest: "44",
              length: "30"
            }
          ],
        }
      },
  
      methods: {
        changeToCM: function() {
          this.guild_size_inch * 2.54;
          alert(this.guild_size_inch)
        }
      }

I added an answer, Hope that will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 21, 2022 at 14:18

Rohìt Jíndal · Accepted Answer · 2022-03-21 14:18:18Z

I created a below code snippet as per your requirement. Please find the explanation of the logic inline in the snippet.

const app = new Vue({
  el: '#app',
  data() {
    return {
      guild_size_inch: [
        {
          size: "S",
          chest: "92",
          length: "71"
        },
        {
          size: "M",
          chest: "40",
          length: "29"
        },
        {
          size: "L",
          chest: "44",
          length: "30"
        }
      ],
      isInch: true, // property to enable/disable the 'Inch' button.
      isCM: false // property to enable/disable the 'CM' button.
    }
  },
  methods: {
    // Method used to convert the Inch values into CM.
    changeToCM() {
      this.isCM = true;
      this.isInch = false;
      this.guild_size_inch = this.guild_size_inch.map((obj) => {
        obj.chest = parseInt(obj.chest) * 2.54;
        obj.length = parseInt(obj.length) * 2.54;
        return obj;
      });
    },
    // Method used to convert the CM values into Inch.
    changeToInch() {
        this.isCM = false;
      this.isInch = true;
      this.guild_size_inch = this.guild_size_inch.map((obj) => {
        obj.chest = Math.ceil(parseInt(obj.chest) / 2.54);
        obj.length = Math.ceil(parseInt(obj.length) / 2.54);
        return obj;
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="changeToInch" :disabled="isInch">Inch (Default)</button>
  <button @click="changeToCM" :disabled="isCM">CM</button>
  <table>
    <th>Size</th>
    <th>Chest</th>
    <th>Length</th>
    <tr v-for="(item, index) in guild_size_inch" :key="index">
      <td>{{ item.size }}</td>
      <td>{{ item.chest }}</td>
      <td>{{ item.length }}</td>
    </tr>
  </table>
</div>

RenaudC5 · Accepted Answer · 2022-03-21 08:53:16Z

1

You are trying to multiply the object instead of the numbers contains in your object.

What you should try is loop through your array and multiply both chest and length.

You can perform this with a forEach loop : see documentation here

changeToCM: function() {
   this.guild_size_inch.forEach(item => {
      item.chest = parseInt(item.chest) * 2.54
      item.length = parseInt(item.length) * 2.54
   });
   alert(this.guild_size_inch)
}

answered Mar 21, 2022 at 8:53

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

2 Comments

Elkazi Over a year ago

I see, I really appreciate it, that's teaching me a lot, I have another question, how to get back to Inch again? or I should make same function and change the formula?

RenaudC5 Over a year ago

I think there are 3 ways of doing this : Either you can make another method changeToInch, pass a parameter to the existing function or set a global parameter like @Boussadjra Brahim suggests and check it in the existing function

Boussadjra Brahim · Accepted Answer · 2022-03-21 09:45:28Z

1

Define a property called currentUnit initially set to inch which will be changes by the click event, then use a computed property that returns the sizes based on the current unit which you selected :

 data() {
   return {
      guild_size_inch:[....],
      currentUnit:'cm'

   }
 },
computed:{
   sizes(){
      return this.guild_size_inch.map(size=>{
          size.chest=this.currentUnit==='cm'?size.chest*2.54:size.chest*2.54
          size.length=this.currentUnit==='cm'?size.length/2.54:size.length/2.54
         return size;
    })
  }
},
methods:{
  changeUnit() {
     this.currentUnit==='cm'?this.currentUnit='inch':this.currentUnit='cm'
 }
}

then render the sizes in the table.

edited Mar 21, 2022 at 9:45

answered Mar 21, 2022 at 9:12

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

Elkazi Over a year ago

that's genius, thank you so much for this amazing code and explanation, I do have a few questions, to switch between Inch and Cm need to add @click="currentUnit = 'inch'"? the second question is when I added Math.ceil() the numbers increasing when I switch to inch to cm or cm to inch: size.chest=this.currentUnit==='cm'?Math.ceil(size.chest*2.54):Math.ceil(size.chest/2.54) size.length=this.currentUnit==='cm'?Math.ceil(size.length*2.54):Math.ceil(size.length/2.54)

Boussadjra Brahim Over a year ago

you should add @click="changeUnit" please look at the edited answer I fixed some mistakes

Collectives™ on Stack Overflow

How to @click change the data in the array with Vuejs

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related