Kotenarok

   ในบางสถานการณ์ที่เราต้องการจะใส่ tag script (หรือ tag อื่น ๆ ที่อยากจะ escape ไม่ให้ Vue.js render) ภายใต้ template ของ Vue.js โดยเฉพาะเวลาทำงานกับ Payment gateway มักจะต้องใส่ script เพิ่มเข้ามา <component is="script" src="https://www.example.com/script.js" ></component> ให้ใช้ฟีเจอร์ Dynamic Components เข้ามาช่วย ใส่ script เข้าไปใน attribute is ได้เลย

 สมมติเรามี getter ชื่อ foo ตามโค้ดด้านล่างที่รับ argument 1 ตัว getters: { foo: (state) => (bar) => {      return bar; } } เราสามารถประกาศใน computed ได้แบบนี้ computed: { ...mapGetters([ 'foo', //ส่งชื่อ getter ที่ต้องการใช้เข้าไปตรง ๆ ได้เลย ]) } จากนั้นเวลาเรียกใช้ก็สามารถเรียกใช้ได้เหมือน getter ปกติเลย created() { console.log(this.foo('hello')); // logs "hello" } อ้างอิง:  https://stackoverflow.com/questions/43807123/pass-params-to-mapgetters

v-model เป็นพื้นฐานสำคัญของ Vue.js ที่ใช้เพื่อผูกข้อมูลกับตัวแปร เมื่อ user กรอกข้อมูลเข้ามาจะทำให้ตัวแปรที่ผูกนั้นได้รับ value จาก user ด้วย หรือในทางกลับกันถ้าหาก โค้ดของเราแก้ไขค่าตัวแปรนั้น user ก็จะเห็นค่าที่เปลี่ยนไปตามที่โค้ดเราเขียนเช่นกัน เรียกว่า "two-way data binding" v-model สามารถใช้งานได้กับ input พื้นฐานทั้งหมด ดูโค้ดตัวอย่างได้ตามนี้ Input Text <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> จากตัวอย่างด้านบนเราผูก value กับตัวแปรชื่อ message ผ่าน v-model เมื่อ user กรอกข้อมูลเข้ามาที่ input ข้อความที่แสดงตรง <p> ก็จะอัพเดทตามไปด้วย ตัวอย่างอื่น ๆ Textarea <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Checkbox <input type="checkbox" id="checkbox" v-model="checked...

 บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง Vue.js มาแล้วในระดับหนึ่ง เนื่องจากไม่ใช่บทความสอนการเขียน Vue.js แต่เป็นส่วนเสริมเรื่องการทำ component ขึ้นมาเองแล้วรองรับการใช้งาน v-model (ถ้ายังไม่รู้ว่า v-model คืออะไร แนะนำให้ศึกษาเพิ่มเติมมาก่อน) ทำให้รองรับ v-model ยังไง? v-model มันคือการส่งข้อมูลไปกลับระหว่าง parent component และ child component ซึ่งถูกเรียกว่า two-way binding คือค่าของตัวแปรจะถูกส่งไปกลับระหว่าง 2 component นี้ ค่าตั้งต้นของการทำ v-model คือ component จะรับค่าผ่าน props ที่ชื่อว่า value และส่งค่ากลับไปด้วย event ที่ชื่อ input ขอยกตัวอย่างโค้ดง่าย ๆ เป็น EmailInput.vue ตามนี้ละกันครับ <template> <input type="email" @input="handleInput" /> </template> <script> export default { props: ['value'], data: () => ({ email: null }), created() { if (this.value) { this.email = this.value; } }, methods: { handleInput (e) { this.email = e.target.value; this.$em...