vue.js how to use props with single file components

Question

I am very new to vue.js ,

I am using single file components with webpack , I am trying to calculate the sum of {{operating.totaloperating}} , I understand that to accomplish this I need to pass operating data back to script as prop, am I right? How can I do that? When I try to pass it as prop, it says undefined.

I can pass props to this component only from template, but not in the file itself.

<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>

Answer 1

You should remove :operating="operating" from the tr since is not a component. Also the prop operating is of no use. Be sure to insert this component in a <tbody> or it won't work at all. What for errors in the console.