Vue cannot detect changes for the object in property addition or deletion. Lets take an example of user data changes,
1 2 3 4 5 6 7 8 9 10 11 | var vm = new Vue({ data: { user: { name: 'John' } } }) // `vm.name` is now reactive vm.email = john@email.com // `vm.email` is NOT reactive |
You can overcome this scenario using the Vue.set(object, key, value) method or Object.assign(),
1 2 3 4 5 | // (or) vm.user = Object.assign({}, vm.user, { email: john@email.com }) |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
