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

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 和 vue.

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>

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

Prefilled input that allows the user to add input

inertiajs

vue.js

vuejs2

laravel-8