vueのコードを修正する④ 〜配列をimportする〜

vueのコードを修正する④

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

この記事はその第四弾。

今回修正することになるコード

今回は↓のコードが修正されます。

    updatePost: function () {
      const data = new FormData(); // multipart/form-data形式のため、new FormData()を使う
      data.append("rname", this.post.rname); // file形式以外も送信可能
      data.append("rinformation", this.post.rinformation); // file形式以外も送信可能
      data.append("ingredient", this.post.ingredient); // file形式以外も送信可能
      data.append("procedure_1", this.post.procedure_1); // file形式以外も送信可能
      data.append("procedure_2", this.post.procedure_2); // file形式以外も送信可能
      data.append("procedure_3", this.post.procedure_3); // file形式以外も送信可能
      data.append("rimage", this.uploadFile);
      data.append("Energy", this.post.Energy); // file形式以外も送信可能
      data.append("Protein", this.post.Protein); // file形式以外も送信可能
      data.append("Lipid", this.post.Lipid); // file形式以外も送信可能
      data.append("Carbohydrate", this.post.Carbohydrate); // file形式以外も送信可能
      data.append("Dietary_fiber", this.post.Dietary_fiber); // file形式以外も送信可能
      data.append("Potassium", this.post.Potassium); // file形式以外も送信可能
      data.append("Calcium", this.post.Calcium); // file形式以外も送信可能
      data.append("iron", this.post.iron); // file形式以外も送信可能
      data.append("Zinc", this.post.Zinc); // file形式以外も送信可能
      data.append("VitaminA", this.post.VitaminA); // file形式以外も送信可能
      data.append("VitaminB1", this.post.VitaminB1); // file形式以外も送信可能
      data.append("VitaminB2", this.post.VitaminB2); // file形式以外も送信可能
      data.append("VitaminC", this.post.VitaminC); // file形式以外も送信可能
      data.append("Salt_equivalent", this.post.VitaminC); // file形式以外も送信可能
      const url = location.pathname;
      const id = url.replace(/[^0-9]/g, "");
      axios
        .patch(`/api/v1/posts/${id}`, data)
        .then((response) => {
          let e = response.data;
          window.location = `/posts/${id}`;
        })
        .catch((error) => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    },

配列を作成しインポートする

data.appendをする際に配列を用意してループ処理する方が早そうだったので、以下のように配列を作成しコードに利用しました。

const postParameters = [
  "rname",
  "rinformation",
  "ingredient",
  "procedure_1",
  "procedure_2",
  "procedure_3",
  "rimage",
  "Energy",
  "Protein",
  "Lipid",
  "Carbohydrate",
  "Dietary_fiber",
  "Potassium",
  "Calcium",
  "iron",
  "Zinc",
  "VitaminA",
  "VitaminB1",
  "VitaminB2",
  "VitaminC",
  "Salt_equivalent",
];

export default postParameters;

●修正後のコード

    updatePost: function () {
      const data = new FormData(); // multipart/form-data形式のため、new FormData()を使う
      for (const i of postParameters) {
        data.append(i, this.post[i]); // file形式以外も送信可能
      }
      const url = location.pathname;
      const id = url.replace(/[^0-9]/g, "");
      axios
        .patch(`/api/v1/posts/${id}`, data)
        .then((response) => {
          let e = response.data;
          window.location = `/posts/${id}`;
        })
        .catch((error) => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    },

完成したコード

行ってきた修正を反映したコードはこちらになります。
修正を反映したコード