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

【问题标题】：vue.js how to use props with single file componentsvue.js 如何将 props 与单个文件组件一起使用
【发布时间】：2016-12-30 01:18:50
【问题描述】：

我对@987654322@很陌生，

我正在使用带有 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>

【问题讨论】：

响应包含什么？
响应包含一个数组 [{"id":1,"totalsalary":"900"},{"id":2,"totalsalary":"100"}] ，我想达到总计：1000 。 :operating="operating" 此属性在单个文件组件中不起作用。我返回未定义。
那么totaloperating在哪里？？？
对不起，我写错了，不是 totalsalary，数组是 [{"id":1,"totaloperating":"900"},{"id":2,"totaloperating":" 100"}]
对我有用jsfiddle.net/gurghet/dg32j4v0

标签： vue.js vue-component

【解决方案1】：

您应该从tr 中删除:operating="operating"，因为它不是一个组件。道具operating 也没有用。请务必将此组件插入到<tbody> 中，否则它根本不起作用。控制台中的错误是什么。

【讨论】：