v-model 更改后如何触发功能？

Question

我有输入，用于过滤 Vue 中的对象数组。我正在使用 Salvattore 构建过滤元素的网格，但效果不是很好。我想我必须调用 rescanMediaQueries();在我的 v-model 更改后可以运行，但不知道如何运行。

这是我的 Vue 实例：

var articlesVM = new Vue({
      el: '#search',
      data: {
        articles: [],
        searchInput: null
      },
      ready: function() {

          this.$http.get('posts').then(function (response) {
            this.articles = response.body;
          });

      }
});

下面是我构建搜索的方式

<div class="container" id="search">
  <div class="input-field col s6 m4">
    <input v-model="searchInput" class="center-align" id="searchInput" type="text" >
    <label class="center-align" for="searchInput"> search... </label>
  </div>

  <div id="search-grid" v-show="searchInput" data-columns>
    <article v-for="article in articles | filterBy searchInput">
        <div class="card">
            <div class="card-image" v-if="article.media" v-html="article.media"></div>
            <div class="card-content">
                <h2 class="card-title center-align">
                    <a v-bind:href="article.link">{{ article.title }}</a>
                   </h2>
                   <div class="card-excerpt" v-html="article.excerpt"></div>
            </div>
            <div class="card-action">
                <a v-bind:href="article.link"><?php _e('Read More', 'sage'); ?></a>
            </div>
        </div>
    </article>
  </div>

我确实通过向我的 Vue 添加 watch 选项使网格系统正常工作，但是每次我在我的输入中写入一些内容然后删除它时，我的 filterBy 方法都不起作用根本。即使我尝试重新输入与之前相同的关键字，它也不会填充任何数据。这是我使用的手表选项：

watch: {
   searchInput: function (){
       salvattore.rescanMediaQueries();
   }
}

Answer 1

我认为您的问题在于 http 的成功处理程序中 this 的范围。 Vue 组件中的 articles 对象未从 http.get(..) 成功处理程序中获取任何值。

在您的 ready 函数中，您的 http 成功处理程序应如下所示：

this.$http.get('posts').then(response => {
  this.articles = response.body;  // 'this' belongs to outside scope
});`

或者你也可以这样做：

var self = this;  // self points to 'this' of Vue component
this.$http.get('posts').then(response => {
  self.articles = response.body;  // 'self' points to 'this' of outside scope
});`

另一个类似的问题：

还有一件事-最好将数据定义为函数，如下所示：

var articlesVM = new Vue({
  el: '#search',
  data: function() {
    return {
      articles: [],
      searchInput: null
    }
  },
  ...
}

这可确保您的文章对象对于组件的此实例是唯一的（当您在应用中的多个位置使用相同的组件时）。

在评论 #1 后编辑

下面的代码似乎运行正常，watch 函数运行完美：

var vm = new Vue({
    el: '#search',
    template: `<input v-model="searchInput" class="center-align" id="searchInput" type="text" >`,
    data: {
        searchInput: ""
    },
    watch: {
        searchInput: function() {
            console.log("searchInput changed to " + this.searchInput);
        }
    }
})

模板中的 input 是您版本的精确副本 - 我什至设置了 id 和 v-model，但我看不出设置 id

Vue.js版本：2.0.3

根据问题中的详细信息，我无法进一步了解。你能检查一下你的代码是否与上面的代码匹配，看看你是否可以得到控制台调试消息？

在评论 #4、#5 后编辑

这里还有一个想法需要验证：

vue.js 的作用：渲染 DOM
salvattore 插件的作用：仅使用 CSS 制作 DOM 布局

假设以上对于 salvattore 插件是正确的，并且希望它不会与 vue.js observers / getters / setters 混淆，那么您可以执行以下操作：提供大约 50 毫秒的时间延迟，以便 vue.js完成渲染，然后调用salvattore插件进行布局

所以你的手表功能需要如下：

watch: {
   searchInput: function (){
       setTimeout(function(){
           salvattore.rescanMediaQueries();
       }, 50);
   }
}

或者您也可以使用 Vue.nexttick() 如下：

Vue.nextTick(function () {
    // DOM updated
})

nextTick 记录在此处：https://vuejs.org/api/#Vue-nextTick

我不知道您是否需要为 salvattore 插件提供一些额外的时间来启动布局，但上述其中一项应该可行。

如果有效请告诉我！

v-model 更改后如何触发功能？

How to fire function after v-model change?

javascript

vue.js