Solve Vue error: Unable to use watch listening attribute correctly

Solution to Vue error: Unable to use watch monitoring attribute correctly

Vue is a very popular front-end development framework, but during use, we may encounter Some errors and errors. One of the more common problems is the inability to use watch correctly to monitor properties. In this article, we will describe the causes of this problem and provide some solutions.

First, let us look at a simple sample code:

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message: {
      handler: function (newValue, oldValue) {
        console.log('message changed')
      }
    }
  }
}
</script>

In the above example, we defined a message property in the Vue component and bound it using v-model Set to an input element. At the same time, we also use watch to monitor changes in the message attribute.

However, when we try to run this code in the browser, we may encounter the following error message: [Vue warn]: $watch is not a function.

The reason for this error is that the writing method of watch attribute has changed in Vue 2.0 version. In versions prior to Vue 2.0, we could directly define a processing function in the watch attribute to listen for changes in the attribute. But in Vue 2.0 and later versions, we need to use a new way of writing to define the watch attribute.

The way to solve this error is to define the watch attribute according to the new writing method. Modify the above sample code as follows:

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed')
    }
  }
}
</script>

In the new writing method, we no longer use the handler attribute to define the processing function, but directly write the function in the watch attribute.

When we run the modified code in the browser, we will find that the watch attribute can correctly monitor changes in the message attribute and no more errors will occur.

To summarize, the way to solve the problem that Vue cannot correctly use the watch listening attribute is to apply the writing method after Vue 2.0 to the code. That is, write the processing function directly in the watch attribute without using the handler attribute.

I hope the content of this article can help you solve this problem and better use Vue to develop front-end applications. If you have other related questions, please leave a message for discussion. Happy programming!

The above is the detailed content of Solve Vue error: Unable to use watch listening attribute correctly. For more information, please follow other related articles on the PHP Chinese website!