vueのコードを修正する③ 〜dataプロパティを動的に追加〜

vueのコードを修正する③

半年ほど前に、栄養価を確認できるレシピサイトをつくりました。
その為にがむしゃらに書きちらしてしまったコードを改善していきます。

この記事はその第三弾。

前回の記事の振り返り、

当初は、取得したレシピにhtmlで「q_x」クラスを紐付けて管理していました。
前回はこれを修正して、取得したレシピの所属するクラスにquantityプロパティを追加して、数量を管理することにしました。

dataプロパティを動的に追加

ただ、このままでは取得したレシピの数量を動的に増減することができません。
原因は以下のコードです。

  methods: {
〜以下略〜
    add_ingredient: function (post) {
      this.ingrd_sum.push(post);
    },

ingrd_sumという配列にpushで取得したレシピを格納していますが、このやり方だとvueは動的に配列の増減を検知してくれないようです。
参考：リアクティブの探求_配列に関して

なので以下に修正。

  methods: {
〜以下略〜
    add_ingredient: function (post) {
      this.allIngredients.splice(-1, 0, post);
    },

余談ですが、最初の引数を-1にすると配列の末尾の要素を指定できるんですねー。面白いなーと思いました。

これで、全ての取得したレシピの数量変化を動的に検知できるようになりました。

if文の削除

また、取得したレシピの数量をプロパティで表せるようになったので、「q_x」を紐付ける為の以下のif文もなくせます。
●修正元コード

        if (i == 0) {
          var bfr_num3 = this.q_0;
        } else if (i == 1) {
          var bfr_num3 = this.q_1;
        } else if (i == 2) {
          var bfr_num3 = this.q_2;
        } else if (i == 3) {
          var bfr_num3 = this.q_3;
        } else if (i == 4) {
          var bfr_num3 = this.q_4;
        } else if (i == 5) {
          var bfr_num3 = this.q_5;
        } else if (i == 6) {
          var bfr_num3 = this.q_6;
        } else if (i == 7) {
          var bfr_num3 = this.q_7;
        } else if (i == 8) {
          var bfr_num3 = this.q_8;
        } else if (i == 9) {
          var bfr_num3 = this.q_9;
        } else if (i == 10) {
          var bfr_num3 = this.q_10;
        } else {
          var bfr_num3 = 1;
        }

●修正後コード

      for (let ingrd in this.ingrd_sum) {
        let bfr_num3 = ingrd.quantity;
      }

途中経過

ここまでの修正でコードが以下のように短くなりました。

<div>
  <p>利用する材料</p>
  <ul v-for="item in ingrd_sum" :key="item.id">
    <li>{{ item.rname }}</li>
    <input v-model="item.quantity" />
  </ul>
</div>

〜省略〜

import axios from "axios";
export default {
  data: function () {
    return {
      show: false,
      post: {},
      posts: [],
      allIngredients: [],
      keyword: "",
      errors: "",
      uploadFile: null,
    };
  },

〜省略〜
  computed: {
    addNutrients: function () {
      let sum_nutrients = {
        Energy: "0",
        Protein: "0",
        Lipid: "0",
        Carbohydrate: "0",
        Dietary_fiber: "0",
        Potassium: "0",
        Calcium: "0",
        iron: "0",
        Zinc: "0",
        VitaminA: "0",
        VitaminB1: "0",
        VitaminB2: "0",
        VitaminC: "0",
        Salt_equivalent: "0",
      };
      let sn_keys = Object.keys(sum_nutrients);
      for (let ingrd in this.ingrd_sum) {
        let bfr_num3 = ingrd.quantity;
        for (let i = 0; i < 14; i++) {
          let sn_key = sn_keys[i];
          let num1 = parseFloat(sum_nutrients[sn_key]);
          let num2 = parseFloat(ingrd[sn_key]);
          let num3 = parseFloat(bfr_num3);
          if (Number.isNaN(num2)) {
            num2 = 0;
          }
          if (num3 < 0 || 1000 < num3) {
            num3 = 1;
          } else {
            num2 = num2 * num3;
          }
          sum_nutrients[sn_key] = num1 + num2;
          );
        }
      }
      return sum_nutrients;
    },
  },

〜省略〜

  methods: {
〜省略〜
    add_ingredient: function (post) {
      this.allIngredients.splice(-1, 0, post);
    },