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

vue.js vue

Mikey 2021-09-16 09:24:49 ‧ 1245 瀏覽

分享至

各位大大好:
想請問各位關於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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

gior__ann

iT邦新手 2 級 ‧ 2021-09-16 09:42:13

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

在不變更資料結構的情況下改 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>

希望有幫助到你

回應 3
分享
檢舉

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

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

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

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

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

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

登入發表回應

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