Автоматически обновлять поле ввода в форме, vue. js - PullRequest
Новая
       19

Автоматически обновлять поле ввода в форме, vue. js

0 голосов
/ 14 февраля 2020

Я хочу искать элементы, используя поле ввода в форме. Я передаю значение из компонента в другой, и содержимое изменяется, но только после нажатия клавиши ввода. Есть ли способ автоматически обновлять список после ввода каждой новой буквы? Вот мой код:

Родитель (приложение): 

<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 () возвращает значение от дочернего элемента к parent, а затем FilterPosts () находит соответствующие элементы. Я подозреваю, что форма могла быть виновна в этой проблеме, но я не знаю точно, как избавиться от нее и все еще быть в состоянии передать значение родителю.

Спасибо

1 Ответ

1 голос
/ 14 февраля 2020

у ребенка вы используете submit событие, которое вызывается при входе. Вы должны использовать @input на самом входе. и кстати, вам даже не нужно было объявлять pharse в 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>
...