时间戳

首页 > 解决方案 > 为什么观察者不运行？

vue.js - 为什么观察者不运行？

问题描述

我有以下名为 的数据属性selector，我在其中设置了它的初始值，mounted()因为它是一个 HTML 元素，由于加载也有一些延迟，我将它的值设置在setTimeout(). 然后，每当我选择不同的选项时，它value显然应该改变。我们应该注意这种变化。现在watcher似乎不起作用，我不明白为什么。有人可以帮忙吗？

我的数据属性：

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

我的观察者：

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(" ");
      });
    }
  },

和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>

标签： vue.js

解决方案

更新您的mouted功能：


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);
  }

推荐阅读