iT邦幫忙

0

vue.js object資料使用v-for 顯示問題

各位大大好:
想請問各位關於object型態的資料如何v-for顯示呢
這是我的Object資料 我要使用v-for來顯示

var myObject= [
        [
          {
          title: '123',
          author: 'Jane Doe1',
          publishedAt: '2020-03-22'
          },
          {
          title: '345',
          author: 'Jane Doe2',
          publishedAt: '2020-09-22'
          }
        ],
       	[
         	{
          title: '789',
          author: 'Jane Doe3',
          publishedAt: '2020-03-22'
        	}
      	]
]

這是我目前實作的情況 為了方便使用我先回歸最基本的方式,嘗試了許久 無法依照我想要的方式呈現
我要怎麼取出細項的值呢?我並不想要現在codepen顯示的方式
https://codepen.io/gbhilaqb-the-sasster/pen/mdwqaoj

2 個回答

0
gior__ann
iT邦新手 4 級 ‧ 2021-09-16 09:42:13

/images/emoticon/emoticon06.gif
基本上這個資料結構我覺得很醜 ~
除非有特殊情況必須這麼建立資料,不然會請對方修正,不然就是自己組自己要的資料樣子

在不變更資料結構的情況下改 v-for ,我是會使用兩層

<ul id="v-for-object" class="demo">
  <li v-for="value in myObject">
    <p v-for="inner in value">{{ inner.title }}</p>
  </li>
</ul>

https://ithelp.ithome.com.tw/upload/images/20210916/20120722wgaOBKHhs6.jpg

希望有幫助到你

froce iT邦大師 1 級 ‧ 2021-09-16 10:59:02 檢舉

或許是有分類,譬如有繳錢的第一組,沒繳錢的第二組。

gior__ann iT邦新手 4 級 ‧ 2021-09-16 11:11:22 檢舉

恩恩 有可能~ 所以還是得看狀況

n1056444 iT邦新手 5 級 ‧ 2021-09-16 11:29:46 檢舉

Hi 很謝謝您替我解答,資料會這麼醜是因為整理過後有進行分類的動作,因為我處理還不夠成熟 目前只想到這方式,很謝謝您的幫助!

0
froce
iT邦大師 1 級 ‧ 2021-09-16 11:23:02
<div id="v-for-object" class="demo">
  <div v-for="value in myObject">
    <ul class=demo>
      <li v-for="item in value">{{ item.title }}</li>
  </div>
</div>

你的 myObject 裡面是2個array,理論上設計api的應該不會那麼閒,在同一個搜尋裡吐2個不同結果給你,應該是那兩個array會是不同的分類或是合併在一起。

反正這是個連api都設計的有問題的例子。正常一點的api如下:

{
  "group1": [
      {
          title: '123',
          author: 'Jane Doe1',
          publishedAt: '2020-03-22'
      },
      {
          title: '345',
          author: 'Jane Doe2',
          publishedAt: '2020-09-22'
      }
  ],
  "group2": [
      {
          title: '789',
          author: 'Jane Doe3',
          publishedAt: '2020-03-22'
      }
  ]
}

用json傳array回來是有安全疑慮的,詳情去查JSON hijacking

n1056444 iT邦新手 5 級 ‧ 2021-09-16 11:30:36 檢舉

Hi 很謝謝您替我解答,資料會這麼醜是因為整理過後有進行分類的動作,因為我處理還不夠成熟 目前只想到這方式,很謝謝您的幫助!

我要發表回答

立即登入回答