Filtre_Recherche.vue

<template>
    <div id="zoneRecherche" v-on:keydown.enter="submit">

    Entrez le terme à rechercher (si plusieurs termes les séparer par des espaces :
    <br>
    <input style="height: 2.25vh" type="text" v-model="recherche"/>
    <br>

    <br>
    <p> Sur quel élément voulez vous faire la recherche ?</p>
    <div>
      <input type="radio" class="radio" id="huey" name="drone" value="titre"
             checked v-model="choixRecherche">
      <label for="huey"> Titre</label>
      <input type="radio" class="radio" id="dewey" name="drone" value="contenu" v-model="choixRecherche">
      <label for="dewey">      Contenu</label>
    </div>

    <input type="radio" id="louie" name="drone" value="titre&contenu" v-model="choixRecherche">
    <label for="louie">Titre & Contenu</label>
    <br>
    <br>
    <span id="validerRecherche" :class="(recherche.length === 0 || choixRecherche.length === 0)  ? 'indisponible' : ''" @click="submit">Valider la recherche</span>
    <br>
    <p style="color: red; font-weight: bold">⚠ Pas câblé ⚠</p>

  </div>
</template>

<script>
export default {
  name: "Filtre_Recherche",
  data: function(){
    return {
      recherche: "",
      choixRecherche: ""
    }
  },
  /**
   * @vuese
   * Permet la création du filtre lié au(x) champ(s) de recherche désiré(s)
   */
  methods: {
    submit: function () {

      if (this.recherche.length !== 0 && this.choixRecherche.length !== 0){

        for (let mot in this.recherche.split(' ')){
          this.$emit("creer_filtre", {filtre: this.recherche.split(' ')[mot], type: "recherche", choix: this.choixRecherche})
        }
        this.recherche = ''
        this.choixRecherche = ''
      }
    }
  }
}
</script>

<style scoped>
label {
  margin-right: 10px;
  margin-left: 2px;
}

#validerRecherche::before {
  content: "\2611";
  margin-right: 5px;
}

.indisponible {
  filter: grayscale(50);
  color: grey;
}

</style>