如何@click使用Vuejs更改陣列中的資料

我有一個有兩個按鈕英寸和CM的桌子，我想在點擊時將數字從英寸更改為 CM，請有人教我怎么做??????

 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)
        }
      }

uj5u.com熱心網友回復：

我根據您的要求創建了以下代碼片段。請在代碼段中找到行內邏輯的解釋。

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>

uj5u.com熱心網友回復：

您正在嘗試將物件相乘，而不是物件中包含的數字。

您應該嘗試的是回圈遍歷您的陣列并將胸部和長度相乘。

forEach您可以使用回圈執行此操作：請參閱此處的檔案

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)
}

uj5u.com熱心網友回復：

定義一個名為currentUnitinitial set的屬性inch，單擊事件將更改該屬性，然后使用計算屬性回傳基于您選擇的當前單位的大小：

 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'
 }
}

sizes然后在表格中渲染。

標籤：Vue.js

上一篇：VisualStudioCode中的Vuejsonclick資料重定向

下一篇：清空ref物件時不觸發watch