在 vueJS 中跳过观察者 [英] Skip watcher in vueJS

问题描述

我有一个用于更新文档实体的表单.

I have a form for updating document entity.

文档实体由员工列表(它是一个对象数组)组成，每个员工都有一个帖子，它只是一个字符串.

The document entity consists of list of employees (which is an array of objects) and each employee has a post which is just a string.

我有一个下拉列表(一种 vue-multiselect 的包装器)，它接受员工数组并将所选员工同步到 data() 中的 selectedEmployee 变量.

I have a dropdown (kind of wrapper for vue-multiselect) which accepts the array of employees and syncs selected employee to a selectedEmployee variable in data().

而且我还有一个 selectedEmployee 观察者，它会在下拉列表中选择员工时自动设置 post 输入.

And also I have a watcher for selectedEmployee which sets the post input automatically when an employee is selected in the dropdown.

因此，当以表单创建文档时一切正常，但是，当我更新文档时，我从服务器获取现有文档，设置 selectedEmployee 并设置员工的职位.但是，文档也保留了员工的职位，所以当我第一次打开文档的表单以更新它时，我不想自动更新文档的职位.我希望它仅在用户实际选择自己的员工时更新.

So, when creating a document in the form everything's fine, however, when I update the document, then I fetch existing document from server, set selectedEmployee and set employee's post. But, the document also keeps employee's post, so the first time when I open document's form in order to update it, I don't want to automatically update document's post. I want it to be updated only when user actually selects employee himself.

但是观察者也会第一次被调用.

But the watcher gets called the first time too.

那么，假设我们有 John Doe 和他的经理.当我创建文档时，我将他的帖子更改为设计师.然后，我打开文档表单以更新它，我应该看到对于这个特定文档，John Doe 的帖子是设计者"，但观察者被调用并将帖子返回给经理.

So, imagine we have John Doe and his a manager. When I create the document, I change his post to designer. Then, I open up the document form in order to update it, and I should see that for this specific document John Doe's post is "designer", but the watcher gets called and returns the post to manager.

我试图在 data() 中创建一个假变量，比如 doneFetching，但它只有在我直接在 watcher 中更新这个 var 时才有效，这看起来很危险，另外，在我拥有的其他实体中许多不同类型的选定员工，因此制作大量假国旗不是一种选择.

I tried to make a fake variable in data(), like doneFetching, but it works only if I update this var directly in watcher, which looks quite dangerous, plus, in other entities I have many different kinds of selected employees, so making tons of fake flags is not an option.

这是真实的代码示例(在我的例子中员工 = 代表):

Here is real code sample (employee = representative in my case):

  selectedApproveRepresentative(representative) {
    if (!representative) {
      this.memoData.approve_representative_id = null
      return
    }

    this.memoData.approve_representative_id = representative.id

    // Here is temporary solution, but I have many watchers for many different kinds of employees. If I move the doneFetching flag after I initialized the form, it'll be set to true, and only after that the watcher will be called
    if (this.mode === 'update' && !this.doneFetching) {
      this.doneFetching = true
      return
    }

    // In normal case a representative might have or have not post, so depending on this case we set it to be empty or filled. But this should not be called the first time I open the form
    this.memoData.approve_representative_post_dative_case =
      representative.post_dative_case ?
      representative.post_dative_case : ''
  },

这里是我初始化数据的地方:

Here is where I initialize data:

created() {
  if (this.memo) {
    this.memoData = _.cloneDeep(this.memo)
    this.selectedApproveRepresentative   = _.cloneDeep(this.memo.approve_representative)

  }
},

推荐答案

据我所知，您的问题是初始化组件时执行的观察者.您是否尝试将观察者的直接属性设置为 false?

as I understood, your problem is the watcher executed when you init the component. Have you tried setting the immediate property of the watcher to false?

并不是每个人都知道观察者可以用不同的方式定义.

Not everybody knows that the watchers can be defined in different ways.

watchers: {
   propertyToWatch() { //code... }
}

将函数名称作为字符串"传递

watchers: {
   propertyToWatch: 'nameOfAfunctionDefinedInMethodsSection'
}

对象声明

这是声明观察者的最具描述性的方式.您将其编写为具有处理程序属性的对象(它可以是作为字符串传递的函数的名称，如上所述)和其他属性，例如 deep 以查看对象的嵌套属性，或者在您的情况下immediate 告诉观察者在安装组件时是否应该立即运行.

The object declaration

This one is the most descriptive way of declaring a watcher. You write it as an object with a handler property (it can be the name of a function passed as string as above), and other properties like deep to watch nested properties of an object, or in your case immediate which tells to the watcher if the should run immediately when the component is mounted.

watchers: {
   propertyToWatch: {
      immediate: false,
      handler: function() { //code.. }
   }
}

这篇关于在 vueJS 中跳过观察者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！