Why does the type of the state change when changing the state through a component?

[realconvis]

I have a store and the state is defined as:

const books= ref([] as Book[]);

And the Type Book is defined as:

export default interface Book { id?: number; name: string; pages: number; }

I use the state to display a list of books:

<tr v-for="(book, index) in bookStore.books"  :key="index">
      <td>
          <v-text-field v-model="book.name" label="Name" variant="outlined"></v-text-field>
      </td>
      <td>
          <v-text-field v-model="book.pages" label="Pages" variant="outlined"></v-text-field>
      </td>
</tr>

If i change the input inside of the input fields the state is updated.
But if i type a number for the number of pages, the number is converted to string inside of the store.
Why this happens?
By definition inside of the interface, pages should be a number, not a string.

[zlayine]

v-text-field needs to be a number field?

[realconvis]

This coul be the solution.
But shouldn´t pinia throw an error or transform the type if possible?
Because like this it is not type safe.

[realconvis]

Now i tried it out with "type=number".
The generated HTML code is valid.
But typing any number, results as a string inside of the pinia store.

[realconvis]

I tried it out with a standard html input type number field, than it works. Seems to be a vuetify issue.