4

返回 this.user （全局计算属性）按预期工作。当然，我正在制作副本，因为我不想覆盖实际的用户数据。所以，我正在使用 Object.assign。但是，一旦我包含 return Object.assign({}, this.user)（与 this.user 相对），watch 方法就不再起作用。

这是我的模板（我使用的是 bootstrap-vue）：

<template>
  <form role="form">
    <b-form-group
      label="First Name"
      label-for="basicName"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-name-first" type="text" v-model="userFormData.fname"></b-form-input>
    </b-form-group>
          <b-form-group
      label="Last Name"
      label-for="basicName"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-name-lirst" type="text" v-model="userFormData.lname"></b-form-input>
    </b-form-group>
          <b-form-group
      label="Email"
      label-for="user-email"
      :label-cols="3"
      :horizontal="true">
        <b-form-input id="user-email" type="text" v-model="userFormData.email"></b-form-input>
    </b-form-group>
      <b-form-group
          :label-cols="3"
          :horizontal="true">
                    <b-button type="submit" variant="primary">Save changes</b-button>
            <b-button type="button" variant="secondary" @click="userFormCancel">Cancel</b-button>
        </b-form-group>
      </form>
</template>

因此，只要将更改应用于userProfile（通过输入上的 v-model），这将起作用并将editsPending设置为true

<script>
export default {
  name: 'userProfile',
  data () {
    return {
      editsPending: false
    }
  },
  computed: {
    userFormData: function () {
      return this.user
    }
  },
  watch: {
    userFormData: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
}
</script>

...但这不是；userFormData成为user的克隆，但editsPending不受userFormData更新的影响。

<script>
export default {
  name: 'userProfile',
  data () {
    return {
      editsPending: false
    }
  },
  computed: {
    userFormData: function () {
      return Object.assign({}, this.user)
    }
  },
  watch: {
    userFormData: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
}
</script>

谁能解释为什么会发生这种情况并提出可行的解决方案？

4

3 回答 3

4

计算属性仅在其某些依赖项发生更改时才会重新评估。（来源）

这就是为什么它可以使用return this.user而不可以使用的原因，Object.assign因为它不是反应性依赖。

如果你想要响应式数据，你应该初始化userFormData为一个空对象数据，并在创建 Vue 实例时分配你的用户：

  data () {
    return {
      editsPending: false,
      userFormData: {}
    }
  },
  created() {
    this.userFormData = Object.assign({}, this.user)
  },
于 2018-05-31T21:24:33.467 回答
0

测试了不同的东西来重现你看到的行为。

我怀疑在您的模板中，您将输入绑定到UserFormdata（不正确）

<input v-model="userFormData.name">

而不是（正确）

<input v-model="user.name">

如果您可以分享您的模板，这将有所帮助；）

编辑：添加模板后。

new Vue({
  el: '#app',
  data () {
    return {
      editsPending: false,
      user: { name: 'John Doe' },
      userCachedData: {},
    }
  },
  created() {
    this.userCachedData = Object.assign({}, this.user);
  },
  watch: {
    user: {
      deep: true,
      handler (val) {
        this.editsPending = true
      }
    }
  },
  methods: {
    userFormCancel () {
      this.editsPending = false
    }
  }
})

<div id="app">
  {{ user }}
  {{ userCachedData }}
  <br>
  <input v-model="user.name" />
  {{ this.editsPending }}
</div>

Codepen：https ://codepen.io/aurelien-bottazini/pen/BVNJaG?editors=1010

于 2018-05-31T20:43:02.993 回答
0

您可以使用 $emit 为对象赋值：

mounted() {
  this.$emit("userFormData", this.user);
}
于 2019-10-16T11:16:56.390 回答