Correction_Anabel

app.vue

<template>
  <div id="app">
    <navbar></navbar>
    <p>Nb: {{ datas.limit }}</p>
    <search></search>

    <range-slider class="slider" min="1" max="10" step="1" v-model="datas.limit">
    </range-slider>
    <input v-model="datas.limit" />
    <my-form></my-form>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Taches from '@/components/Taches'
import MyForm from '@/components/MyForm'
import Search from '@/components/Search'

import Cache from '@/components/Cache'
import {Store} from '@/Store.js'
import {Bus} from '@/Bus.js'
import RangeSlider from 'vue-range-slider'
// you probably need to import built-in style
import 'vue-range-slider/dist/vue-range-slider.css'
 
export default {
  name: 'app',
  data(){
    return {
      datas: Store.datas,
    }
  },
  components: {navbar: Navbar,  myForm: MyForm, RangeSlider, search: Search},
   
}
</script>

<style>

</style>

myForm.vue

<template>
  <div>

    <div class="row">
      <form class="col s12">
        <div class="row">
          <div class="input-field col s4">
            <input id="nouvelle-tache" type="text" class="validate" v-model="newTask.titre">
            <label for="nouvelle-tache">Nouvelle tache</label>
          </div>
          <div class="input-field col s4">
            <input id="heures" type="number" class="validate" v-model="newTask.heures">
            <label for="heures">N° d'heures</label>
          </div>
          <div class="input-field col s4">
            <input id="note" type="number" class="validate" v-model="newTask.note">
            <label for="note">Note</label>
          </div>
        </div>
        <button class="btn" @click="addTask" type="button">Envoyer</button>
      </form>
    </div>
    {{newTask.titre}}
  </div>

</template>

<script>
import {Bus} from '@/Bus.js'
import {Store} from '@/Store.js'

export default {
	name: 'myForm',

	data(){
    return {
			datas: Store.datas,
      newTask: {
				titre: '',
				note: 0,
				heures: 0,
				visibilite: true
			}
    }
  },

	
	created() {
    Bus.$on('three', function(){
			console.log("Entre al bus");
      if(Store.datas.tachesSup === 3){
      alert("He oh doucement!");
	    	}
    }
    );
	},

	methods: {
    addTask: function(){
      this.datas.taches.push(this.newTask);
			this.newTask = {};
      this.datas.limit -= 1;
       
			Store.datas.newTask = true;
      console.log(Store.datas.newTask);

    }
  },

	  watch:{
    datas: function(){
      if(this.datas.tachesSup >= 3){
         this.msg = "Hé oh ! Doucement";
      }
    }
  }

}
</script>

Search.vue

<template>
	<div>
		Rechercher
		<input type="search" v-model="datas.word" @keyup="recherche">
	</div>
</template>

<script>
import {Store} from '@/Store.js'

	export default {
  	name: 'search',
		data(){
			return {
				datas: Store.datas
			}
		},
		methods: {
			recherche(){
				Store.datas.word = this.datas.word;
				Store.search()
			}
		}
	}


</script>


<style>

</style>

Store.js

export const Store = {
	// state: {
	// 	tachesSup
	// },

	// mutations: {
	// 	increment(state, value) {
	// 		state.tachesSup += value;
	// 	}
	// },

	datas: {
		taches: [
			{
				titre: "Faire abc 1",
				note: 8,
				heures: 3,
				visibilite: true
			},
			{
				titre: "Faire dce 2",
				note: 6,
				heures: 1,
				visibilite: true
			},
			{
				titre: "Faire fgh 3",
				note: 3,
				heures: 4,
				visibilite: true
			},
			{
				titre: "Faire ijk 4",
				note: 6,
				heures: 1,
				visibilite: true
			},
			{
				titre: "Faire lmn 5",
				note: 9,
				heures: 7,
				visibilite: true
			}
		],
		tachesSup: 0,
		limit: 10,
		newTask: false,
		word: ''
	},

	search() {
		let tab = [];
		let reg = new RegExp(this.datas.word, "i");

		if (this.datas.word.length >= 3) {
			tab = this.datas.taches.filter((elt) => reg.test(elt.titre));
		} else {
			tab = this.datas.taches;
		}

		console.log(tab)

		return tab;

	}
};

Taches.vue

<template>
  <div>
    <div class="row">
      <div v-for="item in tasks">
        <div v-if="item.visibilite === true">
          <div class="col s12 m3">
            <div class="card blue-grey darken-1">
              <div class="card-content white-text">
                <span class="white-text">
					<p>Tache: {{item.titre}}</p>
					<p>Note: {{item.note}}</p>
					<p>Temps: {{item.heures}} heures</p>
                    </span>
              </div>
              <div class="card-action">
                <button class="btn" @click="deleteTask(item)" type="button"> Eliminer</button>
                <button class="btn" @click="cacher(item)" type="button"> Cacher</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Store} from '@/Store.js'
import {Bus} from '@/Bus.js'


export default {
  name: 'taches',
  data(){
    return {
      
    }
  },
  computed: {
    tasks(){
      return Store.search();
    }
  },
	methods: {
	  deleteTask: function (item) {
			let position = this.tasks.taches.indexOf(item);
      this.tasks.taches.splice(position, 1);
      Store.datas.tachesSup += 1;
		 this.three();
		},

    cacher: function(item){
      let position = this.tasks.taches.indexOf(item);
      console.log(Store.datas.taches[2]);
      console.log("cacher: " + position);
      Store.datas.taches[position].visibilite = false;
    },

	  three: function(){
      Bus.$emit('three');
       },
     }//ferme methods
   } //ferme export
</script>

<style scoped>
  .card-action {
    text-align: center;
  }
  
  button {
    display: inline-flex;
  }
</style>