@masayo1019posted at 2023-12-12

Goの構造体でmapして返ってきたデータをv-data-tableに設定する方法

Q&A

Go JSON TypeScript Vuetify3

Goの構造体でmapして返ってきたデータをv-data-tableに設定したい

Web開発初心者です。

件名のことを実現したいのですが、型変換のようなエラーが出て、できません。やり方が間違っているのだと思うのですが、どうやっていいのか分からず困っています。
どうかご教授お願いします。

発生している問題・エラー

該当するソースコード

Vuetify

<v-btn @click="SearchFunc">検索</v-btn>    
<v-sheet color="white" elevation="5" height="250">
  <v-data-table
        :headers="htests"
        :items="itests"
        item-value="id"
        class="my-table"></v-data-table>
</v-sheet>

<script>
import axios from "axios"
export default { 
  data:()=>{
    return{
        htests: [
        { title: '商品CD', align: 'start', key: 'CSHNCD' },
        { title: '商品名', align: 'start', key: 'CSHNNM' },
      ], 
      itests: [
        { CSHNCD: 'CSHNCD1',CSHNNM:'CSHNNM1'},
        { CSHNCD: 'CSHNCD2',CSHNNM:'CSHNNM2'},
      ],
    }
  },
  methods:
  {
    SearchFunc: async function(){
      const jsonPostRequest = await axios.post("http://xxx.xxx.xxx.xxx:8082/GetData", {
        Hik: "test"});
      this.itests = jsonPostRequest.data;
    }
}

}
</script>

main.go

type SearchPrm struct {
	Hik string
}
type Test struct {
	CSHNCD string
	CSHNNM string
}

func GetZaikoList(c echo.Context) error {
	var prm SearchPrm
	c.Bind(&prm)
	fmt.Println(prm.Hik)
 
	aryData := map[int]Test{}

	aryData[1] = model.Test{CSHNCD: "testCD", CSHNNM: "testNM"}
	return c.JSON(http.StatusOK, aryData)

}

0 likes

1Answer

@masayo1019 posted at 2023-12-13

自己解決です。以下のように書き換えることでエラーは解決しました。

Vuetify

<v-btn @click="SearchFunc">検索</v-btn>    
<v-sheet color="white" elevation="5" height="250">
  <v-data-table
        :headers="htests"
        :items="itestTESTs"
        item-value="id"
        class="my-table"></v-data-table>
</v-sheet>

<script>
import axios from "axios"
export default { 
  data:()=>{
    return{
        htests: [
        { title: '商品CD', align: 'start', key: 'CSHNCD' },
        { title: '商品名', align: 'start', key: 'CSHNNM' },
      ], 
      itests: [
        { CSHNCD: 'CSHNCD1',CSHNNM:'CSHNNM1'},
        { CSHNCD: 'CSHNCD2',CSHNNM:'CSHNNM2'},
      ],
      itestTESTs:[{ID:"",CSHNCD:"",CSHNNM:""}],
    }
  },
  methods:
  {
    SearchFunc: async function(){
      const jsonPostRequest = await axios.post("http://xxx.xxx.xxx.xxx:8082/GetData", {
        Hik: "test"});

      this.itests = jsonPostRequest.data;
      alert(Object.keys(this.itests).length);
      
      for (const [index, itest] of Object.entries(this.itests)) {
        this.itestTESTs[index] = ({ID:index, CSHNCD:itest.CSHNCD, CSHNNM:itest.CSHNNM}) 
      }   
    }
  }
}

}
</script>

0Like

Are you sure you want to delete the question?