vue.js - vue.js 如何将 props 与单个文件组件一起使用

Question

我很新vue.js，

我正在使用带有 webpack 的单个文件组件，我正在尝试计算 的总和{{operating.totaloperating}}，我知道要完成此操作，我需要将operating数据作为道具传递回脚本，对吗？我怎样才能做到这一点？当我尝试将它作为道具传递时，它说未定义。

我只能从模板将道具传递给该组件，但不能在文件本身中传递。

<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

您应该:operating="operating"从tr因为不是组件中删除。道具operating也没用。一定要在 a 中插入这个组件，<tbody>否则它根本不起作用。控制台中的错误是什么。