How to load data when arrive this page

[i-ked-ii]

สวัสดีค่ะ

ค่อนข้างมือใหม่กับ Vue เลยอยากสอบถามว่า พอมีวิธีแนะนำว่าให้ข้อมูลในตารางโหลดขึ้นมาแสดงเลยไหมค่ะ คือตารางที่เขียนต้อง refresh ก่อนถึงจะโหลดข้อมูลขึ้นมา

และอยากขอตัวอย่างการส่งข้อมูลจากตารางหจึ่งไปอีกตารางหนึ่งค่ะ กดปุ่ม view ใน row ของตารางที่ 1 ให้แสดงข้อมูลรายละเอียดของข้อมูลนี้เป็นตารางที่ 2

[ratiw]

ปกติข้อมูลที่โหลดมาก็จะแสดงขึ้นมาทันทีอยู่แล้วนะครับ แปะโค้ดมาให้ดูดีกว่าครับ หรือถ้าจะให้ดีลงไว้ใน jsfiddle, codepen, หรือ codesandbox ยิ่งดีใหญ่

[i-ked-ii]

@ratiw https://jsfiddle.net/Suphawadee/h556nfd1/

[ratiw]

ตัวอย่างมีที่ผิดหลายที่ครับ ยังไงก็รันไม่ได้

อย่างแรกเลยคือใช้ library ผิด vuetable-2 ต้องใช้ https://unpkg.com/vuetable-2@1.7.5/dist/vuetable-2.js ไม่ใช่ https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js อันนั้นของอีกคนครับ

ต่อมา library อื่นๆ ที่ใช้ใน code ไม่ได้โหลดมาคือ

• axios เพราะมีการเรียกใช้ axios.get(...)
• lodash เพราะใน dataManager function ใช้ทำการกรองข้อมูล _.filter(..)
• moment เพระใน formatDate function มีการเรียกใช้

ที่หนักเลย ไม่ได้ register Vuetable ด้วยคำสั่ง Vue.use(Vuetable) เพราะการเรียกใช้โดยตรงแบบนี้ ต้องทำการ register ด้วย Vue.use(...) ก่อนเสมอครับ ไม่อย่างนั้น มันก็จะบอกว่า ไม่รู้จัก ในที่นี้ this.$refs.vuetable จะชี้ไปที่ <vuetable> แต่ก็จะเป็นแค่ tag html ธรรมดา ไม่ใช่ vue component เลยทำให้ไม่เห็น function refresh
เลยขึ้น error (ดูใน console log)

ลองดูที่แก้ไขให้เท่าที่ทำได้ครับ jsfiddle
เนื่องจากผมไม่เห็นข้อมูลที่ใช้จริง เลยปรับแก้ให้ใช้ข้อมูลตัวอย่างของ Vuetable ครับ

[i-ked-ii]

ขอโทษที่แปะ ไม่ครบนะค่ะ พอเอาไปลง jsfiddle เลยไม่ได้เช็คให้ละเอียดว่าแปะโค้ดมาครบรึป่าว เดี๋ยวแก้ให้ใหม่ค่ะ

[i-ked-ii]

@ratiw อาจจะเป็นเพราฐานข้อมูลทางเราก็ได้ค่ะลองเอา api ของคุณมาแปะแล้วใช้งานได้ปกติไม่ต้องโหลดหน้าใหม่ https://jsfiddle.net/Suphawadee/h556nfd1/

ขอถามอีกนิดค่ะ ว่า ตัวselect option นี่เราดึงข้อมูลทั้งหมดอย่างไงค่ะ อยากให้ all ทำงาน

[ratiw]

ขึ้นอยู่ว่า API backend ครับ ว่า support "all" filter รึเปล่า Vuetable ไม่ได้ทำหน้าที่นี้ครับ
เนื่องจากคุณใช้งาน Vuetable แบบ Data mode (:api-mode="false") code ในส่วนการจัดการจะอยู่ที่
dataManager function ทั้งหมด ในตัวอย่างนี้คือใช้ lodash ในการทำ filter.

ที่จริงน่าจะใช้ Vuetable ในโหมดปกติได้นะครับ น่าจะสะดวกกว่า ถ้ายังไม่เข้าใจ ให้ลองทำตาม tutorial ให้หมดก่อนครับ ติดตรงไหนถามมาเป็นจุดๆ ได้