使用v-switch时switchPackage变更无控制台输出，求排查问题

错误点梳理 #

• 多余且无效的@change事件绑定：你在<v-switch>上写的@change="switchPackage!=switchPackage"只是执行了一次不等于运算，根本不会修改switchPackage的值。而且v-model已经会自动同步开关状态到绑定的变量，这个事件绑定完全多余，还可能干扰正常的双向绑定逻辑。
• Watch监听器的语法错误：在Vue Class Component语法中，不能通过watch()方法定义监听器，正确方式是使用@Watch装饰器。另外你把newValue的类型定义为number，但开关的状态值是布尔类型boolean，类型定义也不符合实际。

修正后的代码 #

组件模板代码

<v-switch class="package-switch" v-model="switchPackage" inset>
</v-switch>

脚本代码（简洁写法）

import { Vue, Prop, Watch } from 'vue-property-decorator';

export default class MembershipProducts extends Vue {
  @Prop() readonly products!: Object;
  
  // Class Component中可直接声明响应式数据，无需包裹在data()中
  switchPackage = false;

  @Watch('switchPackage')
  onSwitchPackageChange(newValue: boolean) {
    console.log('switch toggled to ' + newValue);
  }
}

脚本代码（保留data()的写法）

如果你习惯保留data()方法的写法，也可以这样写：

import { Vue, Prop, Watch } from 'vue-property-decorator';

export default class MembershipProducts extends Vue {
  @Prop() readonly products!: Object;

  data() {
    return {
      switchPackage: false
    }
  };

  @Watch('switchPackage')
  onSwitchPackageChange(newValue: boolean) {
    console.log('switch toggled to ' + newValue);
  }
}

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