Default Values for inputs

[its-rj]

I need a way to pass default values coming from the server to an input field that is bound to a property. I know I can use v-scope like this:

    <div class="form-field wide required">
        <label class="label" for="user-city">City</label>
        <input id="user-city" v-model="userCity" @input="logCity" name="user-city" value="Another City" required="required">
    </div>
</form>
<script src="https://unpkg.com/petite-vue"></script>
<script>
    PetiteVue.createApp({
        userCity: '',

        logCity() {
            console.log(this.userCity)
        }
    }).mount()
</script>```

However if I type something into the input field I always get an empty string within my console. logCity() only outputs my input when I remove the v-scope directive. What is the right way to pass default values to a vue instance?

[sqllyw]

<script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'

    createApp({

        userCity: 'Another City',

        logCity() {
            console.log(this.userCity)
        }
    }).mount()
</script>


<div v-scope>
    <form>
        <div class="form-field wide required">
            <label class="label" for="user-city">City</label>
            <input id="user-city" v-model="userCity" @input="logCity" name="user-city" required="required">
        </div>
    </form>
</div>

[its-rj]

Thanks, @sqllyw . Unfortunatelly I got the markup wrong in my initial post and part of my code was cut off. So my question was a bit confusing. Here's another try (simplified with only relevant code):

<script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'

    createApp({

        userCity: '',

        logCity() {
            console.log(this.userCity)
        }
    }).mount()
</script>

<form v-scope="{userCity: 'Initial City'}">
     <input id="user-city" v-model="userCity" @input="logCity" name="user-city">
</form>

You are right: with your code above the console would log out what I type into the input.
But I need to set an initail value that is delivered from the server at page load. I tried to accomplish that by passing the default value to v-scope. But in that case I always get an empty string from the console. The value never changes.
So what is the best solution to pass a default value to the vue app?

[sqllyw]

after posting of form, the page rendered with v-scope is a new page, the old page is already gone, how can those properties be detached? they do not exist any more

[sqllyw]

maybe you can just use fetch to post the data in the form and do whatever you like after, those properties will be there

[its-rj]

That's how traditional Multi Page Applications (MPAs) work: I send off a form. The server processes this form and sends a new page back. In case of an error in the inputs the returned page can derive from the same template, but it's always a "new" page. In my case the server returns the page with prefilled form inputs (the same that I sent off to the server) and with an error message rendered into the HTML.
I know I can use fetch. I could also build a Single Page Application, but that's not my goal. I have a legacy website that I want to "sprinkle" with a bit of Javascript and I thought Petite Vue would be a good choice for this.
Thanks anyway for all your time and effort, @sqllyw !

[sqllyw]

Try htmx, it's exactly for your use case, in fact I have been using htmx more, less pettie-vue nowadays

[its-rj]

Thanks for the hint! I'll have a look at htmx.