v型转换后如何启动功能

How to fire function after v-model change?

本文关键字：启动 功能 何启动 转换      更新时间：2023-09-26

我有一个输入，我用它来过滤Vue中的对象数组。我在用塞尔瓦托建立一个过滤元素的网格，但效果不太好。我想我必须调用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选项:

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

我认为您的问题是在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
});`

另一个类似的问题:https://stackoverflow.com/a/40090728/654825

还有一点——最好将数据定义为函数，如下所示:

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 version: 2.0.3

根据问题中的细节，我无法看到进一步的内容。您是否可以检查您的代码是否与上面的代码匹配，并查看是否可以获得控制台调试消息?

在评论#4，#5之后编辑

这是你需要验证的另一个想法:

  • vue.js的作用:渲染DOM
  • salvatore插件的作用:使DOM布局只用CSS

假设以上对salvatore插件是正确的，并且希望它不会与vue.js的观察者/getter/setter混淆，那么你可以这样做:提供大约50毫秒的时间延迟，以便vue.js完成渲染，然后调用salvatore插件来执行布局。

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

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

或者您也可以使用Vue.nexttick()，如下所示:

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

nextTick文档在这里:https://vuejs.org/api/#Vue-nextTick

我不知道你是否需要为salvatore插件提供一点额外的时间来开始布局，但上面的一个应该可以解决。

让我知道它是否有效!

相关文章：