Vuejs - lỗi dễ gặp khi sử dụng v-model và nested object
TIL
720
vuejs
8
Javascript
297
White

Tùng Quân viết ngày 27/05/2018

Vuejs - lỗi dễ gặp khi sử dụng v-model và nested object

v-model chỉ tự động tạo reactive properties cho các properties thuộc 1 level deep của model

Code lỗi

<template>
    <input v-model="foo.bar"> // this will work
    <input v-model="foo.bar.baz"> // Exception: cannot read property 'baz' of undefined
</template>

<script>
export default {
  ....
  data() {
    return {
      foo: { }
    };
  }
}
</script>

Code đúng, phải khai báo toàn bộ các properties từ level 2 deep trở xuống nếu có.

<template>
    <input v-model="foo.bar"> // this will work
    <input v-model="foo.bar.baz"> // this will work
</template>

<script>
export default {
  ....
  data() {
    return {
      foo: {
        bar: {
          baz: undefined
         }
       }
    };
  }
}
</script>

References:
1) https://github.com/vuejs/vue/issues/3732
2) https://github.com/vuejs/vue/issues/5932

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tùng Quân

3 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
4 1
The fastest request is the one that is never sent. Mục tiêu: tăng tốc độ trang web, bằng cách giảm thiểu số lượng request từ browser đến server thô...
Tùng Quân viết 5 tháng trước
4 1
Bài viết liên quan
White
59 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 4 năm trước
59 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!