允许用户添加输入的预填充输入

Question

我有一个输入，我想用https://预填充，所以所有用户必须输入的是域。这是输入

<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>

如果我添加到value属性，我不能键入传递输入值。谢谢你的帮助。我用的是带惯性和价值的laravel。

Answer 1

您可以在数据对象中预填充您的字段:

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>