iT邦幫忙

0

vue前端渲染,一樣的程式碼一邊可以顯示一邊顯示不出來

  • 分享至 

  • xImage

小弟我在做一個抽獎網站,使用vue開發。
其中有一段程式碼為:
https://ithelp.ithome.com.tw/upload/images/20240528/20167353y3Sj2RZmLt.png

list結構為list: [
{ key: 0, name: '周杰倫' },
{ key: 1, name: '汪東城' },
{ key: 3, name: '科鎮東' }
item為每次抽獎抽到的號碼。
其中我可以使用{{ list.find(d => d.key === item).name }}去抓號碼相對應的姓名
https://ithelp.ithome.com.tw/upload/images/20240528/20167353oEiAf2Mulr.png
以上圖片為抽獎完成後立即顯示的抽獎結果

而我還有一個區塊是查看抽獎結果的,但我使用一模一樣的語法卻顯示不出來。程式碼如下
https://ithelp.ithome.com.tw/upload/images/20240528/20167353P6kVrNC61J.png
以上圖片item.value存放儲存到的抽獎號碼
item結構為
{ "label": "獎品名稱", "name": "獎品名稱", "value": [ 1,2,3,4,5 ] }

但不知道為何顯示不出來,請問要如何解?

froce iT邦大師 1 級 ‧ 2024-05-28 10:56:29 檢舉
你這要我們怎樣通靈?至少要讓我們看到你比較完整的code、debug訊息吧...
把你第二個區塊的list用console印出來看看內容。

還有vue有個computed去研究一下,這樣不用兩個區塊都重新計算。
janlin002 iT邦好手 1 級 ‧ 2024-05-28 11:54:52 檢舉
至少給個 codesandbox 吧
通靈中!!!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
PY
iT邦新手 2 級 ‧ 2024-05-28 11:00:35

裡面的data指的是甚麼?

{{ list.find(d => d.key === data).name }}

你是想要在暫未抽獎那顯示所有人的名字?

a712306 iT邦新手 5 級 ‧ 2024-05-28 11:20:09 檢舉

data是for迴圈跑item的中獎號碼
暫未抽獎是當item=0時才會顯示暫未抽獎

PY iT邦新手 2 級 ‧ 2024-05-28 12:11:53 檢舉

如果你是要顯示的話那就加個?

{{ list.find((d) => d.key === data)?.name }}
0
YC
iT邦研究生 1 級 ‧ 2024-05-28 14:15:52

有幾個 Debug 技巧

  1. Devtool 看值
  2. 主控臺上會有錯誤提示

至少你要提供這些異常
才有可能看出問題

0
sx0800
iT邦新手 1 級 ‧ 2024-05-29 03:35:01

1 :style="{···}" 裡面根本沒有 vue 的碼,直接 style="..." 即可
2. html 是上綁太多 js code,建議 改寫的 method 區段,方便用 console.log 追 bug

我要發表回答

立即登入回答