Question

我有一个名为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>

Answer 1

更新您的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);
  }

Answer 2

首先，如果需要设置初始数据值并在组件的生命周期中调用某些方法，请使用带有immediate: true的watcher。接下来，默认值可以只是空字符串""，而无需添加空间。最后，当您拥有Vue时，为什么还要使用jQuery？不明白

为什么观察者无法运行？

2 个答案: