Question

我在vuejs中有一些数据要在通过ajax调用发送之前进行格式化，但它会更改其绑定的视图。例如，我在视图01/11/1981上有一个生日字段，格式如此，但是我需要将其格式化为YYYY-MM-DD HH:mm:ss，并且我不希望在后端执行此操作。

我会在前端何时何地执行此操作？我已经尝试在ajax请求之前执行此操作并更改视图，因此我制作了数据副本并对其进行了修改，这也改变了视图。似乎无论我做什么都会影响观点。

这是我的methods块：

methods: {
    /**
     * Update the user's contact information.
     */
    update() {
      /*Attempt to copy and format*/
      var formattedForm = this.form;
      formattedForm.birthday = moment(formattedForm.birthday).format('YYYY-MM-DD HH:mm:ss');```

      Spark.put('/settings/contact', formattedForm)
          .then(() => {
              Bus.$emit('updateUser');
          });
    },
}

这也是我的数据块：

data() {
  return {
      form: $.extend(true, new SparkForm({
          gender: '',
          height: '',
          weight: '',
          birthday: '',
          age: '',
      }), Spark.forms.updateContactInformation),
  };
},

Answer 1

对象在javascript中通过引用传递，这意味着：

let a = {
  "apple": 6
}

let b = a

然后，b和a指向内存中的相同位置，它实质上是将a中对象的地址复制到变量b。

因此您需要克隆该对象，有很多方法可以实现：

b = Object.assign({}, a)

MDN：Object.assign()

这不会被深度克隆，这意味着如果您的对象是嵌套的，那么嵌套对象仍然会在原始对象和副本之间进行链接。

我使用的

：

function isObject(obj) {
  return typeof obj === 'object' && !Array.isArray(obj)
}

function clone(obj) {
  let result = {}
  for (let key in obj) {
    if (isObject(obj[key])) {
      result[key] = clone(obj[key])
    } else {
      result[key] = obj[key]
    }   
  }
  return result
}

function logger () {
  console.log("p.a.b.c: ", p.a.b.c)
  console.log("q.a.b.c:", q.a.b.c)
  console.log("r.a.b.c:", r.a.b.c)
}

let p = {a: {b: {c: 5}}}
let q = clone(p)
let r = Object.assign({}, p)

logger()
p.a.b.c = 11
logger()

Answer 2

最简单的方法是使用Object.assign进行克隆，如下所示：

switchMap()

这是JSFiddle：https://jsfiddle.net/y51yuf05/

保存前无法格式化或转换数据，绑定到视图太紧

2 个答案: