vue2.js Komponente vmodel Daten übergeben

Question

Ich vermisse ein Stück Verständnis für die Verwendung von V-Modell-Daten zu einer Komponente zu übergeben.

Kann ich direkt auf die Checkbox-Modelldaten zugreifen oder muss ich über Requisiten in die Komponente einsteigen?

Wenn jemand Code erklären oder mich irgendwo hilfreich zeigen?

Meine Html

<template id="my-child"> 

    <tr> 
     <td >{{ item.title }}</td> 
     <td style="padding:20px" v-for="price in item.prices" v-bind:price="price" >{{ price }}</td> 
    </tr> 
    </template> 


    <template id="my-parent"> 

     <div class="box" > 
      <div v-for="item in items"> 
      <h1>{{ item.name }}</h1> 
       <img :src="item.imageUrl" style="width:200px;"> 
       <p>{{item.extract}}</p> 
       {{ item.holidayType }} 

        <div is="task" v-for="avail in item.avail" v-bind:item="avail" > 

        </div>  


      </div> 
     </div> 

    </template> 

    <div id="root"> 
     <div id="homesFilters"> 


      <input type="checkbox" id="1" value="hottub" v-model="test"> hot tub 
      <input type="checkbox" id="2" value="garden" v-model="test"> garden 
      <input type="checkbox" id="3" value="cottage" v-model="test"> cottage 
     </div> 

     <task-list></task-list> 
    </div> 

Mein Code

Vue.component('task-list', { 
    template: '#my-parent', 
    props: ['test'], 
    data: function() { 
     return { 
      items: [], 

     } 
    }, 
    methods: { 
    getMyData: function(val) { 

     console.log(this.test); 

     var _this = this; 
     $.ajax({ 
      url: 'vuejson.php', 
      method: 'GET', 
      success: function (data) { 

       _this.items = data; 
      }, 
      error: function (error) { 
       alert(JSON.stringify(error)); 
      } 
     }) 

    } 
    }, 
    mounted: function() { 
     this.getMyData("0"); 
    } 
}); 

Vue.component('task', { 

    template: '#my-child', 
    props: ['item'], 

    data: function() { 
     return { 

     } 
    } 
}); 


new Vue({ 
    el: "#root", 
    data: { 
     test:[] 
    }, 

}); 

</script> 

Answer 1

Ich habe eine schnellen codepen mit Ihrem Code (und verspottet Daten): https://codepen.io/tuelsch/pen/RVrXbX?editors=1010.

Um das Kontrollkästchen Wert test auf Ihrem Stammkomponente zuzugreifen, können Sie es als Stütze an die übergeordnete Komponente wie folgt passieren:

<task-list v-bind:test="test"></task-list> 

Auf diese Weise wird es immer auf die Komponente auf dem neuesten Stand sein. In meinem Codepen drucke ich die Werte auf die Seite, um dieses Verhalten zu veranschaulichen.

Wenn Ihre Anwendung größer wird, sollten Sie ein Flussmuster wie vuex https://vuex.vuejs.org/en/ verwenden, um Ihre Filterwerte zu speichern und von Ihren Komponenten aus darauf zuzugreifen.