Vue 3 Composition API Script Setup "ref" with object and types

Question

I am moving from Vue2 to Vue3 but couldn't manage to transfer some objects to new ref method.

How do I write this with ref with types? I did some research but couldn't find much.

 data() {
    return {
      isDeleteEnabled: true,
      contractSet: {
        contract: {
          id: null,
          name:''
          is_deleted: null,
          created_datetime: '',
        },
        services: [
          {
            id: null,
            name: '',
            is_disabled: null,
            is_deleted: null,
          },
        ],
      } as ContractSetsType,
    };
  },

Started like this but it gives type errors: (No overload matches this call)

    let isDeleteEnabled= ref<boolean>(false); // This works fine

    // This gives type error
    let contractSet = ref<ContractSetsType>({
    contract: {
              id: null,
            },
    });

My ContractSetsType:

 export interface ContractSetsType {
        /**
         * 
         * @type {Contract}
         * @memberof ContractSetsType
         */
        contract?: Contract;
    }
    
    export interface Contract {
        /**
         * 契約id
         * @type {number}
         * @memberof Contract
         */
        id: number;
    
        /**
         * 契約名
         * @type {string}
         * @memberof Contract
         */
        name: string;
    
        /**
         * 削除済フラグ
         * @type {boolean}
         * @memberof Contract
         */
        is_deleted: boolean;
    
        /**
         * 作成日時
         * @type {string}
         * @memberof Contract
         */
        created_datetime: string;
    }

Should I use reactive instead of ref?

How is your ContractSetsType defined?

cSharp
– cSharp

2022-04-25 05:07:12 +00:00
Commented Apr 25, 2022 at 5:07 — cSharp
– cSharp, Commented Apr 25, 2022 at 5:07
@cSharp added above.

sunflower seed
– sunflower seed

2022-04-25 05:34:56 +00:00
Commented Apr 25, 2022 at 5:34 — sunflower seed
– sunflower seed, Commented Apr 25, 2022 at 5:34

cSharp · Accepted Answer · 2022-04-25 05:50:17Z

4

Your ContractSetsType is different from below.

{
    contract: {
        id: null    
    }
}

You have to match the type:

//below works fine
let contractSet = ref<ContractSetsType>({
    contract: {
        id: 12,
        name: "my name",
        is_deleted: false,
        created_datetime: "timestamp string"
    }
})

let contractSet0 = ref<ContractSetsType>({
})

// below doesn't work
let contractSet1 = ref<ContractSetsType>({
    contract: {
        id: 12,
        name: "my name",
    }
})

let contractSet2 = ref<ContractSetsType>({
    contract: {
        id: 12,
    }
})

let contractSet3 = ref<ContractSetsType>({
    contract: {
        id: null
    }
})

If you want

let contractSet = ref<ContractSetsType>({
    contract: {
        id: null
    }
})

to work, you could change interface Contract to have everything optional.

edited Apr 25, 2022 at 5:50

answered Apr 25, 2022 at 5:41

cSharp

3,1891 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sunflower seed Over a year ago

I added the wrong types. Sorry. Could you take a look at the code again?

cSharp Over a year ago

Still, you have to match your correct types. Edited answer to give examples.

Collectives™ on Stack Overflow

Vue 3 Composition API Script Setup "ref" with object and types

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related