How to set JS object as data object from VueJS?

Question

I'm trying to set the data object with an object I'm using in my javascript code.

<div class="col-12" id="profile">
    <span>Name: @{{ name }}</span>
</div>

var userProfile = new Vue({
       el: '#profile',
       data: {
          name: user.name,
       }
    }
);

Somewhere else in my code:

user = {
   name: 'name'
};

I tried to use assign function, to set data. Doesn't work.

Anyone can give me a hint?

Can you create a small demo for this using jsfiddle or snippet here to show the issue happening. — palaѕн
– palaѕн, Commented Apr 13, 2020 at 11:19
this.user = { name: 'name' } or this.$set(this.user, 'name', 'name') or this.user.name = 'name' — Emīls Gulbis
– Emīls Gulbis, Commented Apr 13, 2020 at 11:23
@palaѕн While setting up fiddle (jsfiddle.net/3sjk4c17/4) I found my issue. Jquery was causing it due the delay of loading. — Lars Flieger
– Lars Flieger, Commented Apr 13, 2020 at 11:32

user13278024 · Accepted Answer · 2020-04-13 11:30:09Z

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>

answered Apr 13, 2020 at 11:30

user13278024

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set JS object as data object from VueJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related