Vue类组件中progress/meter绑定响应式值无效果的解决办法

问题原因 #

你遇到的问题和progress/meter标签本身支持响应式无关，核心是没有使用Vue的绑定语法：
你写的 <progress max="100" value="percent"></progress> 中，value="percent" 是将字符串"percent"直接赋值给了value属性，而非绑定你的计算属性percent。这就是为什么模板里{{ percent }}能正常显示，但进度条不更新的原因。

解决方案 #

只要用Vue的v-bind（或简写冒号:）语法绑定value属性，就能让进度条跟随响应式值实时更新：

1. 模板写法二选一

• 完整绑定写法：

  <progress max="100" v-bind:value="percent"></progress>
  

• 简写（推荐）：

  <progress max="100" :value="percent"></progress>
  

2. 验证类式组件计算属性的正确性

确保你的计算属性写法符合Vue类组件规范（以vue-property-decorator为例）：

import { Component, Vue, Computed } from 'vue-property-decorator';

@Component
export default class PasswordProgress extends Vue {
  // 基础响应式变量
  private percentCore: number = 0;

  // 带get/set的计算属性
  @Computed
  get percent(): number {
    return this.percentCore;
  }
  set percent(val: number) {
    this.percentCore = val;
  }

  // 密码校验更新进度的示例函数
  checkPassword(password: string) {
    let score = 0;
    // 根据密码规则计算分数
    if (password.length >= 8) score += 30;
    if (/[A-Z]/.test(password)) score += 25;
    if (/[a-z]/.test(password)) score += 25;
    if (/[^a-zA-Z0-9]/.test(password)) score += 20;
    // 更新计算属性
    this.percent = Math.min(score, 100);
  }
}

3. 完整模板示例

<template>
  <div class="password-progress">
    <input 
      type="password" 
      @input="checkPassword($event.target.value)" 
      placeholder="输入密码查看强度"
    >
    <progress max="100" :value="percent"></progress>
    <span>密码强度：{{ percent }}%</span>
  </div>
</template>

补充说明 #

progress和meter标签本身完全支持响应式属性更新，只要通过Vue的绑定语法将响应式数据与标签属性关联，就能实现实时同步。

内容的提问来源于stack exchange，提问作者DuB loxx