情深忆往缠绵 2023-04-05 22:21 采纳率: 44.6%
浏览 41
已结题

vue的computed如何传值


<template>
  <table>
    <tr>
      <td colspan="4">全校学生统计表</td>
    </tr>
    <tr>
      <td>年级</td>
      <td>班级数量</td>
      <td>班级人数</td>
      <td>年级人数</td>
    </tr>
  </table>
  <table v-for="(index) in nj" :key="index">
    <tr>
      <td>{{ nj[index] }}</td>
      <td>{{ bjCount[index] }}</td>
      <td>{{ bjNumber[index] }}</td>
      <td>{{ njNumber(index) }}</td>
    </tr>
  </table>
  <div>总计:{{ Count }}</div>
</template>

<script setup>
import { computed } from 'vue'

const nj = [1, 2, 3, 4, 5, 6]
const bjCount = [3, 4, 3, 4, 4, 5]
const bjNumber = [30, 35, 40, 35, 40, 30]
let value

const njNumber = (index) => {
  value = computed(() => {
    return bjCount[index] * bjNumber[index]
  })
}

const Count = () => {
  let count = 0
  for (let i = 0; i < nj.length; i++) {
    njNumber(i)
    count += value
  }
  return count
}

</script>

<style scoped>
table {
  margin: 0 auto;
}

td {
  border: black solid 1px;
  width: 100px;
}
</style>


为啥我的预览结果是这样的,谁能 帮我看下什么问题

img

  • 写回答

2条回答 默认 最新

  • 明月落乌江 2023-04-06 08:34
    关注

    computed应该被用于创建计算属性,而不是在计算属性中使用

    
    <template>
        <table>
            <tr>
                <td colspan="4">全校学生统计表</td>
            </tr>
            <tr>
                <td>年级</td>
                <td>班级数量</td>
                <td>班级人数</td>
                <td>年级人数</td>
            </tr>
        </table>
        <table v-for="(item,index,key) in nj" :key="index">
            <tr>
                <td>{{ nj[index] }}</td>
                <td>{{ bjCount[index] }}</td>
                <td>{{ bjNumber[index] }}</td>
                <td>{{ njNumber(index) }}</td>
            </tr>
        </table>
        <div>总计:{{ Count }}</div>
    </template>
    
    <script setup>
    import { computed } from 'vue'
    
    const nj = [1, 2, 3, 4, 5, 6]
    const bjCount = [3, 4, 3, 4, 4, 5]
    const bjNumber = [30, 35, 40, 35, 40, 30]
    
    const njNumber = (index) => {
        return bjCount[index] * bjNumber[index]
    }
    
    const Count = computed(() => {
        let count = 0
        for (let i = 0; i < nj.length; i++) {
            count += njNumber(i)
        }
        return count
    })
    </script>
    
    <style scoped>
    table {
        margin: 0 auto;
    }
    
    td {
        border: black solid 1px;
        width: 100px;
    }
    </style>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月7日
  • 已采纳回答 4月6日
  • 创建了问题 4月5日

悬赏问题

  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 前端echarts坐标轴问题
  • ¥15 CMFCPropertyPage
  • ¥15 ad5933的I2C
  • ¥15 请问RTX4060的笔记本电脑可以训练yolov5模型吗?
  • ¥15 数学建模求思路及代码
  • ¥50 silvaco GaN HEMT有栅极场板的击穿电压仿真问题
  • ¥15 谁会P4语言啊,我想请教一下
  • ¥15 这个怎么改成直流激励源给加热电阻提供5a电流呀
  • ¥50 求解vmware的网络模式问题 别拿AI回答