[Vuejs]-How to set JS object as data object from VueJS?

by

1👍

✅

This solution works. Use the methods setName and setSurname to change the related fields. Be aware that when you update the fields in Vue’s data the changes don’t get reflected in the user object, which is outside the scope of Vue.

<!-- Your other code here... -->

<div id="#profile">
   <span>Name: {{ name }}</span>
   <span>Surname: {{ surname }}</span>
</div>

<script>
const user = {
   name: 'Jhon',
   surname: 'Doe'
};

new Vue({
   data () {
      return {
         name: user.name,
         surname: user.surname
      }
   },
   methods:  {
      setName (value) { this.name = value; },
      setSurname (value) { this.surname = value; }
   },
   el: '#profile'
);
</script>
👤user13278024

Leave a comment