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

Posted 2023-02-23

【中文标题】vue.js 如何将 props 与单个文件组件一起使用

【英文标题】：vue.js how to use props with single file components

【发布时间】：2016-12-30 01:18:50

【问题描述】：

我对@9​​87654322@很陌生，

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

【参考方案1】：

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