Open i-ked-ii opened 6 years ago
ปกติข้อมูลที่โหลดมาก็จะแสดงขึ้นมาทันทีอยู่แล้วนะครับ แปะโค้ดมาให้ดูดีกว่าครับ หรือถ้าจะให้ดีลงไว้ใน jsfiddle, codepen, หรือ codesandbox ยิ่งดีใหญ่
ตัวอย่างมีที่ผิดหลายที่ครับ ยังไงก็รันไม่ได้
อย่างแรกเลยคือใช้ 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.get(...)
dataManager
function ใช้ทำการกรองข้อมูล _.filter(..)
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 ครับ
ขอโทษที่แปะ ไม่ครบนะค่ะ พอเอาไปลง jsfiddle เลยไม่ได้เช็คให้ละเอียดว่าแปะโค้ดมาครบรึป่าว เดี๋ยวแก้ให้ใหม่ค่ะ
@ratiw อาจจะเป็นเพราฐานข้อมูลทางเราก็ได้ค่ะลองเอา api ของคุณมาแปะแล้วใช้งานได้ปกติไม่ต้องโหลดหน้าใหม่ https://jsfiddle.net/Suphawadee/h556nfd1/
ขอถามอีกนิดค่ะ ว่า ตัวselect option นี่เราดึงข้อมูลทั้งหมดอย่างไงค่ะ อยากให้ all ทำงาน
ขึ้นอยู่ว่า API backend ครับ ว่า support "all" filter รึเปล่า Vuetable ไม่ได้ทำหน้าที่นี้ครับ
เนื่องจากคุณใช้งาน Vuetable แบบ Data mode (:api-mode="false"
) code ในส่วนการจัดการจะอยู่ที่
dataManager
function ทั้งหมด ในตัวอย่างนี้คือใช้ lodash
ในการทำ filter.
ที่จริงน่าจะใช้ Vuetable ในโหมดปกติได้นะครับ น่าจะสะดวกกว่า ถ้ายังไม่เข้าใจ ให้ลองทำตาม tutorial ให้หมดก่อนครับ ติดตรงไหนถามมาเป็นจุดๆ ได้
สวัสดีค่ะ
ค่อนข้างมือใหม่กับ Vue เลยอยากสอบถามว่า พอมีวิธีแนะนำว่าให้ข้อมูลในตารางโหลดขึ้นมาแสดงเลยไหมค่ะ คือตารางที่เขียนต้อง refresh ก่อนถึงจะโหลดข้อมูลขึ้นมา
และอยากขอตัวอย่างการส่งข้อมูลจากตารางหจึ่งไปอีกตารางหนึ่งค่ะ กดปุ่ม view ใน row ของตารางที่ 1 ให้แสดงข้อมูลรายละเอียดของข้อมูลนี้เป็นตารางที่ 2