Why watcher does not run?

Question

I have the following data property called selector, which I set its initial value in mounted() since it is an HTML element that also has a bit of delay due to loading I set its value in a setTimeout(). Then whenever I select a different option its value should obviously change. And this change should we watched. Right now the watcher does not seem to work and I can't see why. Can someone help?

My data propery:

data() {
    return {
      selector: " ",
}}

my watcher:

watch: {
    // whenever selector changes, this function will run
    selector: function(newSelection) {
        console.log("in watcher", newSelection);
      $(".page-item a").each(function() {
        if ($(this).text() == ">") $(this).text(" ");
        else if ($(this).text() == ">>") $(this).text(" ");
        else if ($(this).text() == "<") $(this).text(" ");
        else if ($(this).text() == "<<") $(this).text(" ");
      });
    }
  },

and mounted()

 mounted() {
    setTimeout(function() {
      document
        .getElementsByTagName("select")[0]
        .setAttribute("id", "VueTables__limit");
      this.selector = document.getElementById("VueTables__limit").value;
      console.log("in mounted", this.selector);
    }, 2000);
  }

HTML:

 <div class="form-group form-inline pull-right VueTables__limit">
  <div class="VueTables__limit-field">
  <label for="VueTables__limit" class="">Records:</label> 
  <select name="limit" id="VueTables__limit" class="form-control"> 
  <option value="10">10</option>
  <option value="25">25</option>
  <option value="50">50</option></select></div></div>

Use an arrow function in your `setTimeout()`. When you use a `function() { ... }`, you lose your `this` context — Phil, Apr 29 '19 at 05:54
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Phil, Apr 29 '19 at 05:55
even after doing the change to the `setTimeout()` I only get the initial value logged to the console, and not when the value changes. — Code Worm, Apr 29 '19 at 06:06
well, that it is in the HTML, I can paste it as well, but it is just a traditional select element. — Code Worm, Apr 29 '19 at 06:24
Setting `this.selector` to the element value (as you have done in `mounted`) does not bind it forever, it only happens once; it will not change `this.selector` when you select a new option. You should be binding the ` — Phil, Apr 29 '19 at 06:37
yeah, I just realized it, however, I can't directly do that since the HTML is a compiled version of an npm module. is there a way to add that the same way I added the id ? — Code Worm, Apr 29 '19 at 06:39

score 1 · Answer 1 · answered Apr 29 '19 at 06:06

1

Update your mouted function:


mounted() {
    var self = this; //save the ref of 'this'
    setTimeout(function() {
      document
        .getElementsByTagName("select")[0]
        .setAttribute("id", "VueTables__limit");
      self.selector = document.getElementById("VueTables__limit").value;
      console.log("in mounted", this.selector);
    }, 2000);
  }

answered Apr 29 '19 at 06:06

Kaicui

3,795
1
15
20

as I commented above, even after doing the change to the setTimeout() I only get the initial value logged to the console, and not every time the value changes. – Code Worm Apr 29 '19 at 06:09
1

because you did not bind `select` and `option` nodes to your viewModel.check the [Vue Doc](https://vuejs.org/v2/guide/forms.html#Select) to see how to bind your selection to viewModel – Kaicui Apr 29 '19 at 08:10

score 0 · Answer 2 · answered Apr 29 '19 at 05:46

First of all, if you need to setup initial data value and call some methods during component's lifecycle, use watcher with immediate: true. Next, default value could be just empty string "" no need to add space. And the last, why you use jQuery, when you have vue? Don't get it

Why watcher does not run?

2 Answers2