javascript - 如何将 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 中的字段时，更改不会反射(reflect)在 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>