自动更新表单中的输入字段，vue.js

Question

我想使用表单中的输入字段搜索元素。我将一个组件的值传递给另一个组件，内容会发生变化，但只有在按下回车后才会发生变化。有没有办法在输入每个新字母后自动更新列表？ 这是我的代码：

家长（应用程序）：

<template>
  <div id="app">
    <Header v-on:phrase-search="passPhrase" />
  </div>
</template>

<script>
import Header from ...

export default {
  name: "App",
  components: {
    Header,
  },
  data() {
    return {
      posts: [],
      searchedPhrase: ""
    };
  }
  computed: {
    filteredPosts() {
      let temp_text = this.searchedPhrase;
      temp_text.trim().toLowerCase();

      return this.posts.filter(post => {
        return post.name.toLowerCase().match(temp_text);
      });
    }
  },
  methods: {
    passPhrase(phrase) {
      this.searchedPhrase = phrase;
    }
  }
};
</script>

子（页眉）：

<template>
<div class="child">
  <p>Search:</p>
    <form @submit.prevent="phrasePassed">
      <input type="text" v-model="phrase" />
    </form>
</div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      phrase: ""
    };
  },
  methods: {
    phrasePassed() {
      this.$emit("phrase-search", this.phrase);
    }
  }
};
</script>

passPhrase() 将子元素的值传递给父元素，然后 filtersPosts() 找到合适的元素。我怀疑表单可能对这个问题有罪，但我不知道如何摆脱它并且仍然能够将值传递给父级。

谢谢

Answer 1

在您使用调用输入的submit 事件的孩子中。您应该在输入本身上使用@input。顺便说一句，您甚至不需要在data 中声明短语，因为您没有在孩子身上使用它。你把它传出去

你喜欢这样

<template>
  <div class="child">
    <p>Search:</p>
    <form>
      <input type="text" @input="phrasePassed">
    </form>
  </div>
</template>

<script>
export default {
  name: "search",
  methods: {
    phrasePassed(e) {
      this.$emit("phrase-search", e.target.value);
    }
  }
};
</script>