Question

在我正在使用的Vue应用程序中，我有许多表单组件，可用于创建新记录或修改现有记录。打开表单后，还可以单击另一个记录或单击“创建”，在这种情况下，表单的内容将分别替换或清除。

我遇到的问题是，我似乎无法避免public function fetch_all_users(){ $this->db->select('*'); $this->db->from('user'); $query = $this->db->get()->result(); echo json_encode($row); }函数和data函数之间的重复。

这是我的意思的简化示例：

watch

安装窗体时，我要做的一切都必须完成两次：一次在props: ["record"], data() { return { name: this.record ? this.record.name : "", age: this.record ? this.record.age : null }; }, watch: { record(record) { this.name = record ? record.name : ""; this.age = record ? record.age : null; } }函数中设置初始反应特性，然后再次在data中进行任何设置可能会改变的道具。随着watch中的属性数量变大，这变得越来越难以管理并且容易出错。

有什么办法可以将设置逻辑放在一个地方并避免重复？

Answer 1

怎么样？

props: ["record"],
data() {
    return this.updateRecord(this.record, {});
},
watch: {
    record(record) {
        this.updateRecord(record, this);
    }
},
updateRecord(what, where) {
    where.name = what ? what.name : "";
    where.age = what ? what.age : null;
    return where;
}

Answer 2

要解决此问题，请在您的观察者中添加一个immediate属性，该属性也将使其在初始化时调用。因此，将处理record属性的初始值。看看下面的代码：

props: ["record"],
data() {
  return {
    name: "",
    age: null
  };
},
watch: {
  record: {
    immediate: true,
    handler(value) {
      this.name = this.record ? this.record.name : "";
      this.age = this.record ? this.record.age : null;
    }
  }
}

参考：vm.$watch - Vue's Official API

如何避免在安装和更新Vue组件之间重复

2 个答案: