V-Model and null

Great question! This is a common scenario when working with Vue components that expect a specific prop type, especially with form inputs.

Why the warning?
Your <TextInput> component (from Breeze or your own) likely has a prop definition like this:

props: {
    modelValue: {
        type: String,
        default: ''
    }
}

When you bind v-model="someField" and someField is null, Vue warns because it expects a String, not null.

---

Solution 1: Normalize Data Before Passing to Input

The most straightforward fix is to ensure that the value you pass to the input is always a string. You can do this in your parent component:

<TextInput v-model="form.name" :model-value="form.name ?? ''" />

Or, if using v-model, ensure form.name is initialized as an empty string:

data() {
    return {
        form: {
            name: '', // instead of null
            // other fields...
        }
    }
}

If your data comes from an API and may be null, you can normalize it when you receive it:

this.form.name = response.name ?? '';

---

Solution 2: Update the Component Prop Type

If you want your <TextInput> component to accept both String and null, update the prop definition:

props: {
    modelValue: {
        type: [String, null],
        default: ''
    }
}

But this is less ideal, as native inputs expect string values, and you may still get warnings elsewhere.

---

Solution 3: Use a Computed Property

If you can't control the initial value, use a computed property to always provide a string:

<TextInput v-model="normalizedName" />

computed: {
    normalizedName: {
        get() {
            return this.form.name ?? '';
        },
        set(value) {
            this.form.name = value;
        }
    }
}

---

Should you save empty strings instead of nulls?

This is a design decision. For form fields, it's common to use empty strings for "no value" in text inputs, since that's what HTML inputs provide. Using empty strings avoids type issues in the frontend and is generally safe for most backend validation.

Summary:

• Always pass a string to <TextInput>, not null.
• Normalize your data as early as possible (on fetch, on form init, or via computed).
• Saving empty strings instead of nulls for text fields is a common and safe practice.

Let me know if you need a code example for your specific setup!