環境
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>