Help us understand the problem. What is going on with this article?

⛰【Vue.js】MariaDBのJSON型カラムから取得したデータの指定の値を変数名で取り出す為にパースする

環境

Vue.js 6.12.0
PHP 7.3.10
Laravel 6.5.0
MariaDB

やりたいこと

MariaDBのに下記のようなデータが格納されていてそれをLaravelのAPIで取得する。
その内のcontentカラム(JSON型)のデータからdata_kindの値を判断基準として条件分岐を行い、
valueの内容である「テストの内容です🐾」や「赤文字で強調する!!」や円周率をVueので表示する為にJSONをパースする

id content del_flg
1 {"data_kind": "1", "value": "テストの内容です🐾"} 0
2 {"data_kind": "2", "value": "赤文字で強調する!!"} 0
3 {"data_kind": "3", "value": "円周率を表示"} 0
4 {"data_kind": "4", "value": "削除済み😭😭😭"} 1

やったこと

下に全体で色々書いてますが一番重要なのは下記のパース部分です
これが無いとJSONではなくJSONの形をしたただの文字列としてデータが扱われるので値を取り出すことができません

          // 取得データをforEachで全てJSON.parseにかける
          res.data.recordList.forEach(value => {
            value["content"] = JSON.parse(value["content"]);
          });

全体

Hoge.vue
// テンプレ部分
<template>
  <section class="container">

    <div v-for="data in tableData" :key="content.id">
      <!-- 通常表示 -->
      <div v-if="data.content.data_kind === '1'">{{ data.content.value }}</div>
      <!-- クラスを付けて装飾を変更 -->
      <div v-else-if="data.content.data_kind === '2'" class="redBold">{{ data.content.value }}</div>
      <!-- 円周率を表示 -->
      <div v-else-if="data.content.data_kind === '3'">3.141592653589323846....</div>
    </div>

  </section>
</template>

// データ取得とパース部分
<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getContent() {
      axios
        .get("/api/getContent", {
          params: {
            delFlg: 0
          }
        })
        .then(res => {
          // 取得データをforEachで全てJSON.parseにかける
          res.data.recordList.forEach(value => {
            value["content"] = JSON.parse(value["content"]);
          });
          this.tableData = res.data.recordList;
        });
    }
  },
  mounted() {
    this.getContent();
  }
};
</script>

// 装飾
<style lang="sass" scoped>
.redBold
  color: red
  font-weight: bold
</style>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした