как визуализировать пиво / пиво в поиске? - PullRequest
Новая
       2

как визуализировать пиво / пиво в поиске?

0 голосов
/ 09 июля 2020

привет, я хочу знать, как ik может отображать пиво, которое искали, в vue

У меня есть компонент, который отображает список пива. У меня также есть компонент, который ищет пиво. что я хочу сделать, так это то, что когда я ищу, мой компонент списка пива обновляет список и показывает мне только список сортов пива, которые я искал.

это мой компонент списка пива 

<template>
  <div class="container">
    <div>
      <Search v-bind:allBeers="allBeers" />
    </div>
    <div>
      <b-card
        v-bind:key="beer.id"
        v-for="beer in allBeers "
        :img-src="beer.image_url"
        :alt="beer.name"
        img-top
        tag="article"
        style="max-width: 22rem  ;"
        class="mb-2"
      >
        <b-card-text class="c-text">
          <h4 class="title">{{ beer.name }}</h4>
          <p>{{ beer.ingredients.malt[0].name }}</p>

          <router-link
            :to="{
          name: 'BeerDetails',
          params: { id: beer.id,  beer:beer },
        }"
          >
            <b-button class="link" size="sm" variant="outline-warning">View Beer details</b-button>
          </router-link>
        </b-card-text>
      </b-card>
    </div>
  </div>
</template>

<script>
import Search from "./Search";
import { mapGetters, mapActions } from "vuex";

export default {
  components: { Search },
  name: "Beers",
  //   props: ["beers"],
  methods: { ...mapActions(["fetchBeers"]) },
  computed: mapGetters(["allBeers"]),
  created() {
    this.fetchBeers();
  }
};
</script>

и это мой компонент поиска, здесь я фильтрую пиво, которое соответствует моему вводу 

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset">
      <b-form-group id="input-group-1">
        <b-form-input id="input-1" v-model="form.search" type="text" required placeholder="search"></b-form-input>
      </b-form-group>
    </b-form>
  </div>
</template>>

<script>
export default {
  name: "Search",
  props: ["allBeers"],

  data() {
    return {
      form: {
        search: ""
      }
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      this.allBeers.filter(beer => {
        console.log(beer.name.toLowerCase() == this.form.search);
      });

      //alert(JSON.stringify(this.form));
    },
    onReset(evt) {
      evt.preventDefault();
      this.form.search = "";
    }
  }
};
</script>

<style scoped>
</style>

Как мне использовать компонент поиска в моем компоненте пива, чтобы отображать только искомые сорта пива?

1 Ответ

0 голосов
/ 09 июля 2020

В компоненте поиска установите свойство для каждого пива, примерно так: 

    onSubmit(evt) {
      evt.preventDefault();
      this.allBeers.forEach(beer => {
        beer.hidden = (beer.name.toLowerCase() == this.form.search);
      });
    },

И в компоненте пива скрыть нерелевантные сорта пива: 

<template>
  <div class="container">
    <div>
      <Search v-bind:allBeers="allBeers" />
    </div>
    <div>
      <div v-for="beer in allBeers" v-bind:key="beer.id">
        <b-card v-if="!beer.hidden"
        ...
        </b-card>
      </div>
    </div>
  </div>
</template>
...