Vuejs - lỗi dễ gặp khi sử dụng v-model và nested object
TIL
607
vuejs
3
Javascript
250
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

2 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
Male avatar
2 1
Nay mình xin chia sẻ với mọi người cách tạo một ứng dụng chat bằng ngôn ngữ lập trình Nodejs + Vuejs để xây dụng ứng dụng chat Đầu tiên bạn cần ph...
skipperhoa viết 2 tháng trước
2 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
2 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á!