uni-app实现简单的投票功能 uni-app点击统计与比例展示-uni-app-PHP中文网

uni-app中直接修改响应式数据（如this.voteCounts[optionId]++）即可更新视图，需在data()中初始化voteCounts对象，动态选项用this.$set初始化，避免非响应式操作。

uni-app实现简单的投票功能 uni-app点击统计与比例展示

uni-app里怎么用`setData`更新投票数据？

uni-app没有setData，这是微信小程序的写法。在uni-app中，直接修改响应式数据即可触发视图更新，比如this.voteCounts[optionId]++之后，视图会自动重绘——前提是voteCounts在data()里声明为响应式对象。

常见错误是把计数逻辑写在methods里但没绑定到data初始值上，导致第一次点击报Cannot set property 'xxx' of undefined。正确做法是初始化时给每个选项设默认值0：

data() {
  return {
    voteCounts: {
      'option-a': 0,
      'option-b': 0,
      'option-c': 0
    }
  }
}

别用Object.assign或JSON.parse(JSON.stringify())深拷贝后赋值，uni-app的响应式系统不追踪这种操作
如果选项是动态加载的（比如从API获取），务必在mounted或onLoad里用this.$set逐个初始化，否则新增键不会响应
避免在watch里直接改voteCounts再触发自身，容易造成无限循环

怎么算每个选项的投票比例并安全显示？

比例计算本身简单，但要注意除零和浮点精度问题。总票数为0时，所有比例应为0%，而不是NaN%或报错。

推荐在computed里封装计算逻辑，既复用又避免模板中写冗长表达式：

computed: {
  totalVotes() {
    return Object.values(this.voteCounts).reduce((a, b) => a + b, 0)
  },
  voteRatios() {
    if (this.totalVotes === 0) return {}
    const ratios = {}
    Object.keys(this.voteCounts).forEach(key => {
      ratios[key] = Number((this.voteCounts[key] / this.totalVotes * 100).toFixed(1))
    })
    return ratios
  }
}

toFixed(1)返回字符串，必须用Number()转回数值，否则v-for里做比较可能出错
不要在template里写{{ (voteCounts.a / total) * 100 | toFixed(1) }}%，过滤器在uni-app 3.x+已废弃，且无法处理total === 0分支
百分比条宽度建议用:style="{ width: voteRatios['option-a'] + '%' }"，别用v-bind:width——这个属性不存在