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

我想使用表单中的输入字段搜索元素。我正在将一个值从一个组件传递到另一个组件，内容会发生变化，但只有在按enter键后才会发生变化。有没有一种方法可以在每一封新信都被输入后自动更新列表？ 这是我的密码：

ParentApp：

<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将值从子项带到父项，然后FilteredPost查找适当的元素。我怀疑表单可能存在这个问题，但我不知道如何准确地消除它，并且仍然能够将值传递给父级

感谢您在使用submit事件的子系统中调用enter键。您应该在输入本身上使用@input。顺便说一句，你甚至不需要在数据中声明pharse，因为你没有在孩子身上使用它。你就放弃吧

你喜欢这样吗

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

---

谢谢，这正是我想要的：