2016-08-23 1 views
0

Je suis très nouveau je comprends vue.js,vue.js comment utiliser des accessoires avec des composants de fichier unique

J'utilise des composants de fichier unique avec webpack, je suis en train de calculer la somme des {{operating.totaloperating}}, que pour ce faire J'ai besoin de transmettre les données operating au script comme accessoire, ai-je raison? Comment puis-je faire cela? Quand j'essaie de le faire passer pour un accessoire, ça dit indéfini.

Je peux transmettre des accessoires à ce composant uniquement à partir du modèle, mais pas dans le fichier lui-même.

<template> 
    <tr v-for="operating in operatings" :operating="operating"> 
     <th scope="row">{{$index+1}}</th> 
     <td>{{operating.name}}</td> 
     <td>-</td> 
     <td>{{operating.totaloperating}}</td> 
    </tr> 
</template> 

<script> 
    export default { 
     props: ['operating'], 
     data: function() { 
      return { 
       preloader: true, 
       operatings: [] 
      } 
     }, 

     methods: { 

      fetchTotal: function() { 
       this.$http.get('/api/totaloperating').then((response) => { 
        this.$set('operatings', response.json()), 

       }); 
      } 
     }, 



     ready: function() { 

      this.fetchTotal() 

     } 
    } 
</script> 
+0

Que contient la réponse? – gurghet

+0

réponse contient un tableau [{"id": 1, "totalsalary": "900"}, {"id": 2, "totalsalary": "100"}], je veux atteindre le total: 1000. : operating = "operating" cet attribut ne fonctionne pas à l'intérieur du composant de fichier unique. je renvoie indéfini. – OMahoooo

+0

Alors où est 'totaloperating' ??? – gurghet

Répondre

1

Vous devez supprimer :operating="operating" du tr depuis n'est pas un composant. Aussi le prop operating est d'aucune utilité. Veillez à insérer ce composant dans un <tbody> ou cela ne fonctionnera pas du tout. Que faire pour les erreurs dans la console.