文章/答案/技术大牛

发布

问Vue自定义过滤输入组件
EN

Stack Overflow用户

提问于 2017-06-20 20:21:16

回答 1查看 2K关注 0票数 0

我正在尝试创建一个只有一个文本输入的组件。在此输入中键入的字符串将用于筛选列表。我的问题是，我无法处理如何在我的组件和包含要过滤的列表的主应用程序之间共享此过滤器字符串。

我尝试了几种方法，大多数情况下都会得到错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

所以我看了Vuex，但我认为它在这种情况下帮不了什么忙，因为我可以在同一页面中为不同的列表使用几个筛选器组件，而我不希望它们被同步^^

这就是我所拥有的：

过滤器组件

<script type="x/template" id="filterTpl">
    <div> 
        <span class="filter-wrapper">
            <input type="search" class="input input-filter" v-model.trim="filter" />
        </span>
    </div>
</script>

<script>
    Vue.component('list-filter', {
        props: {
            filter: String
        }
        template: '#filterTpl'
    });
</script>

还有我的主应用：

<div id="contacts">
        <list-filter :filter="filter"></list-filter>
        <ul class="contacts-list managed-list flex">
            <li class="contact" v-for="contactGroup in filteredData">
                [...]
            </li>
        </ul>
    </div>

<script>
    var contactsV = new Vue({
        el: '#contacts',
        data: {
            filter: "",
            studyContactsGroups: []
        },
        computed: {
            filteredData: function(){
                // Using this.filter to filter the studyContactsGroups data
                [...]
                return filteredContacts;
            }
        }
    });
</script>

感谢您的帮助或提示:)

vue.js

vue-component

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-20 22:30:44

您可以通过显式的prop-event连接或更简洁的带有sync修饰符的v-bind来同步子值和父属性：

new Vue({
  el: '#app',
  data: {
    rawData: ['John', 'Jane', 'Jim', 'Eddy', 'Maggy', 'Trump', 'Che'],
    filter: ''
  },
  components: {
    'my-input' : {
      // bind prop 'query' to value and
      // @input update parent prop 'filter' via event used with '.sync'
      template: `<input :value="query" @input="updateFilter">`,
      props: ['query'],
      methods: {
      	updateFilter: function(e) {
          this.$emit('update:query', e.target.value) // this is described in documentation
        }
      }
    }
  },
  computed: {
    filteredData: function() {
      // simple filter function
      return this.rawData.filter(el => el.toLowerCase()
      	.match(this.filter.toLowerCase()))
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-input :query.sync="filter"></my-input>
  <hr>
  <ul>
    <li v-for="line in filteredData">{{ line }}</li>
  </ul>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44652919

复制

相似问题

问Vue自定义过滤输入组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue自定义过滤输入组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue自定义过滤输入组件
EN