Search code examples
htmlinputvuejs2onchangelazy-evaluation

Vue v-model.lazy modifier does not work. Why?

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <input v-model.laze="foo" />
      {{foo}}
    </div>

    <script>
      var a = new Vue({
        el: "#app",
        data: { foo: 1 }
      });
    </script>
  </body>
</html>

I would expect to type something, lose focus and then get the output of the {{foo}} updated, but instead the {{foo}} output gets updated as soon as I type something. I.e. the behavior as if there is no .lazy modifier.

I am using the second version of Vue an relying on the documentation.

Solution

  • Change v-model.laze To v-model.lazy

    Try: 

    <!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <input v-model.lazy="foo" />
      {{foo}}
    </div>

    <script>
      var a = new Vue({
        el: "#app",
        data: { foo: 1 }
      });
    </script>
  </body>
</html>