Как установить JS объект как объект данных из VueJS?

Question

Я пытаюсь установить объект данных с помощью объекта, который я использую в своем коде javascript.

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

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

Где-то еще в моем коде:

user = {
   name: 'name'
};

Я пытался использовать функцию назначения, чтобы установить данные. Не работает.

Кто-нибудь может дать мне подсказку?

Answer 1

Это решение работает. Используйте методы setName и setSurname, чтобы изменить связанные поля. Помните, что когда вы обновляете поля в Vue data, изменения не отражаются в объекте user, который выходит за рамки 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>