Prefilled input that allows the user to add input-CodePudding

I have an input that I want to prefill with 'https://' so all the user have to enter is the domain. Here's is the input

<div>
          <form-label for="form.website">Website</form-label>
            <form-input
            v-model="form.website"
            id="form.website"
            type="url"
            class="block w-full mt-1"
            placeholder="https://example.com"
          />
          <form-input-error
            class="block w-full"
            v-if="form.hasErrors && form.errors['website']"
            :message="form.errors['website']"
          />
        </div>

If I add to the value attribute I can't type pass the input value. Thanks for the help. I'm using laravel with inertia and vue.

CodePudding user response：

You can prefill your field in data object:

new Vue({
  el: '#demo',
  data() {
    return {
      form: {website: '' }
    }
  },
  methods: {
    web() {
      this.form.website = 'https://'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <label for="form.website">Website</form-label>
    <input
      v-model="form.website"
      id="form.website"
      type="url"
      class="block w-full mt-1"
      placeholder="https://example.com"
      @focus="web"
    />
  <form-input-error
    class="block w-full"
    v-if="form.hasErrors && form.errors['website']"
    :message="form.errors['website']"
  />
</div>