Vue3+TypeScript响应式类问题：设置has_items为false时清空items

你的问题出在两个核心点：

• 下拉框绑定的是字符串值，导致has_items setter接收到的类型不符合预期，清空数组的逻辑从未触发
• 普通类的内部数组不属于Vue响应式系统，修改数组内容无法被ref追踪到

方案1：修正类型匹配 + 替换数组引用 #

先修复下拉框的value类型，确保传递布尔值而非字符串：

<select v-model="record.has_items">
    <option :value="true">Yes</option>
    <option :value="false">No</option>
</select>

然后修改masterClass的has_items setter，通过替换数组引用来触发响应：

export default class masterClass {
    private _id: number;
    private _has_items: boolean;
    private _items: Array<detailsClass>;

    constructor() {
        this._id = 0;
        this._has_items = false;
        this._items = [];
    }

    // 其他getter/setter保持不变

    get has_items(): boolean {
        return this._has_items;
    }

    set has_items(_value: boolean) {
        this._has_items = _value;
        
        if(!this._has_items) {
            // 替换数组引用，让ref检测到变化
            this._items = [];
        }
    }

    // 其他getter/setter保持不变
}

方案2：让类内部状态变为响应式 #

如果需要支持修改数组内部元素也触发响应，可以用Vue的reactive管理类内部状态：

import { reactive } from 'vue';

export default class masterClass {
    // 用reactive包装内部状态，自动追踪所有属性变化
    private state = reactive({
        id: 0,
        has_items: false,
        items: [] as detailsClass[]
    });

    get id(): number {
        return this.state.id;
    }

    set id(_value: number) {
        this.state.id = _value;
    }

    get has_items(): boolean {
        return this.state.has_items;
    }

    set has_items(_value: boolean) {
        this.state.has_items = _value;
        
        if(!this.state.has_items) {
            // 现在修改数组内部也能被响应式系统追踪
            this.state.items.splice(0);
        }
    }

    get items(): detailsClass[] {
        return this.state.items;
    }

    set items(_value: detailsClass[]) {
        this.state.items = _value;
    }
}

原方法无效的原因 #

1. 类型不匹配：下拉框默认传递的是字符串"true"/"false"，赋值给布尔类型的_has_items时，字符串"false"在JS中会被视为true，导致!this._has_items判断永远为假，清空逻辑从未执行。
2. 响应性限制：ref仅能追踪类实例本身的引用变化，无法感知类内部普通数组的内容修改（如splice），只有当数组引用被替换时，才会触发视图更新。

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