Question

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

我尝试了几件事，大部分时间我都收到错误： if-let

所以我看了Vuex，但我认为在这种情况下它无法帮助，因为我可以在同一页面中使用多个过滤器组件用于不同的列表，我不希望它们被同步^^

这就是我所拥有的：

过滤器组件

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

我的主要应用：

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

感谢您提供任何帮助或提示：）

Answer 1

您可以通过显式的prop-event连接或更简洁的v-bind与sync修饰符同步子值和父道具：

＆＃13;

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

＆＃13;

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

＆＃13;

Vue自定义过滤输入组件

1 个答案: