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也没用。请务必将此组件插入<tbody>，否则根本无法使用。控制台中的错误是什么。

vue.js如何使用具有单个文件组件的props

1 个答案: