Đầu vào biểu mẫu Vue

Nút chọn

Các nút radio thuộc cùng một lựa chọn phải có cùng tên để chỉ được chọn một nút radio.

Giống như tất cả các đầu vào trong Vue, chúng tôi ghi lại giá trị đầu vào của nút radio bằng v-model , nhưng thuộc tính value cũng phải được đặt rõ ràng trên thẻ <input type="radio"> .

Đây là cách chúng ta có thể sử dụng các nút radio ở dạng Vue:

 <template>
  <h1>Radio Buttons in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What is your favorite animal?</p>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted choice:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpVal: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.inpVal) {
        this.inpValSubmitted = this.inpVal;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Hộp kiểm

Khi đầu vào hộp kiểm ( <input type="checkbox"> ) được kết nối với cùng một mảng với v-model , các giá trị cho các hộp kiểm đã chọn sẽ được tập hợp trong mảng đó:

 <template>
  <h1>Checkbox Inputs in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What kinds of food do you like?</p>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Rice"> Rice
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Fish"> Fish
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Salad"> Salad
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFoods: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      this.inpValSubmitted = this.likeFoods;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Danh sách thả xuống

Danh sách thả xuống bao gồm thẻ <select> có thẻ <option> bên trong.

Khi sử dụng danh sách thả xuống trong Vue, chúng ta cần kết nối thẻ <select> với v-model và cung cấp giá trị cho thẻ <option> :

 <template>
  <h1>Drop-down List in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose a car:</label>
    <select  v-model="carSelected" id="cars">
      <option disabled value="">Please select one</option>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carSelected: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carSelected) {
        this.inpValSubmitted = this.carSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

<chọn nhiều>

Với thuộc tính multiple trong thẻ <select> , danh sách thả xuống sẽ được mở rộng và chúng ta có thể chọn nhiều tùy chọn.

Để chọn nhiều tùy chọn, người dùng windows phải nhấn phím 'ctrl' và người dùng macOS phải nhấn phím 'command'.

Khi sử dụng <select multiple> trong Vue, chúng ta cần kết nối thẻ <select> với v-model và cung cấp giá trị cho thẻ <option> :

 <template>
  <h1>Select Multiple in Vue</h1>
  <p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose one or more cars:</label><br>
    <select  v-model="carsSelected" id="cars" multiple>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
      <option>Kia</option>
    </select>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carsSelected: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carsSelected) {
        this.inpValSubmitted = this.carsSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button, select {
    margin: 10px;
    display: block;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Chỉ đọc đầu vào biểu mẫu

Việc sử dụng v-model trên đầu vào của biểu mẫu sẽ tạo ra liên kết hai chiều, có nghĩa là nếu phiên bản dữ liệu Vue thay đổi thì thuộc tính value đầu vào cũng thay đổi.

Đối với các đầu vào dạng chỉ đọc, như <input type="file"> , thuộc tính value không thể thay đổi từ phiên bản dữ liệu Vue và vì vậy chúng tôi không thể sử dụng v-model .

Đối với đầu vào dạng chỉ đọc, như <input type="file"> , chúng ta cần sử dụng @change để gọi một phương thức cập nhật phiên bản dữ liệu Vue:

 <template>
  <h1>Input Type File</h1>
  <form @submit.prevent="registerAnswer">
    <label>Choose a file:
      <input @change="updateVal" type="file">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileInp: null,
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.fileInp) {
        this.inpValSubmitted = this.fileInp;
      }
    },
    updateVal(e) {
      this.fileInp = e.target.value;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
    display: block;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Đầu vào biểu mẫu khác

Với các đầu vào biểu mẫu được đề cập ở trên, chúng tôi phải cung cấp một giá trị cho thuộc tính value , nhưng với các đầu vào biểu mẫu bên dưới, người dùng sẽ cung cấp giá trị:

• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="number">
• <input type="password">
• <input type="range">
• <input type="search">
• <input type="tel">
• <input type="text">
• <input type="time">
• <textarea>

Vì người dùng đã cung cấp giá trị cho các loại đầu vào biểu mẫu này nên tất cả những gì chúng ta cần làm trong Vue là kết nối đầu vào với thuộc tính dữ liệu bằng v-model .

Đây là cách sử dụng <input type="range"> trong Vue:

 <form @submit.prevent="registerAnswer">
  <label>How tall are you?<br>
    <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
  </label>
  <button type="submit">Submit</button>
</form>

Và đây là cách sử dụng <input type="color"> trong Vue:

 <form @submit.prevent="registerAnswer">
  <label>Choose a color: 
    <input v-model="colorInp" type="color">
  </label>
  <button type="submit">Submit</button>
</form>

Và đây là cách sử dụng <textarea> trong Vue:

 <form @submit.prevent="registerAnswer">
  <label>
    <p>What do you think about our product?</p> 
    <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
  </label>
  <button type="submit">Submit</button>
</form>

Tìm hiểu thêm về cách hoạt động của các loại đầu vào biểu mẫu HTML khác nhau trong Hướng dẫn HTML của chúng tôi .

<mẫu>
  <loại đầu vào="văn bản" >
  <p> {{ inpText }} </p>
</template>

<kịch bản>
  const ứng dụng = Vue.createApp({
    dữ liệu() {
      trở lại {
        inpText: 'Văn bản ban đầu'
      }
    }
  })
  app.mount('#app')
</script>