Skip to content

VueCore – v-model ở Vue 3 không chỉ tiện mà còn là nghệ thuật

Vue cung cấp cho chúng ta cách để có thể binding (trao đổi) thông tin 2 chiều (bi-direction) một cách nhanh chóng

Bây giờ Vue 3 còn nâng cấp nó mạnh mẽ hơn bao giờ hết !

<MyStudentCmp 
    v-model:studentName="studentName"
    v-model:studentAge.number="studentAge"
></MyStudentCmp>

Thấy cái gì không ????? Sử dụng v-model trên Component ? à ừ đã dùng ở Vue 2 rồi nhưng 2 v-model trên 1 component ! Excuse miii??

Đúng rồi đó ! Cùng tìm hiểu cách sử dụng v-model 1 cách chuẩn chỉnh nhất nhé <3


Contents

    Multiple model value (nhiều giá trị trên 1 component)

    Ở đây mình sử dụng hình của Vue Mastery để mng dễ hiểu nhé !

    vuejs v-model vue3

    Chắc chắn là ta vẫn có thể sử dụng cú pháp cũ v-model cho Vue 3

    Nhưng nếu ta muốn sử dụng nhiều v-model cùng lúc –> hãy dùng v-model:modelValue

    *modelValue là là tên bạn tự đặt (có thể là : studentName, age, email v.v.)

    Sau đó ta cần phải applied effect lên <input> tag mà ta mong muốn bằng cách đính :value & @input lên thẻ

    :value="modelValue : là giá trị prop bạn nhận từ Parent (*trong hình này : :value=”myInput”)

    @input : ta sẽ set $emit để thông báo lên parent khi nào giá trị thay đổi

    Đọc thêm : $emit là gì ???

    Hãy nhìn vào cú pháp khi $emit : $emit('update:modelValue', _value_)

    “update” là cú pháp quy định nhé ! nó trỏ thẳng đến v-model

    Code Template

    <template>
      <MyStudentCmp 
        v-model:studentName="studentName"
        v-model:studentAge="studentAge"
      ></MyStudentCmp>
      <hr>
      <p>Student Name : {{ studentName }}</p>
      <p>Student Age : {{ studentAge }}</p>
    </template>
    
    
    
    <script>
    import MyStudentCmp from '@/components/MyStudentCmp.vue';
    export default {
      components: {
        MyStudentCmp
      },
      data() {
        return {
          studentName: "Trung Thinh",
          studentAge: 19
      }
    };
    </script>
    
    // Parent Side
    <template>
    
      <label for="name">Name</label>
      <input type="text" id="name" 
        :value="studentName" 
        @input="$emit('update:studentName', $event.target.value)">
    
      <label for="age">Age</label>
      <input type="text" id="age" 
        :value="studentAge" 
        @input="$emit('update:studentAge', $event.target.value)">
    
    </template>
    
    <script>
    export default {
        props: ["studentName", "studentAge"]
    }
    </script>

    Kết quả

    v-model result

    *Rất Chú ý ở đây : nếu thay đổi age : 19 -> 25 => thì 25 nhận về là String chứ không phải Number

    Nói có sách mách có chứng

    <p>Student Age : {{ !!(typeof studentAge === 'number') }}</p>

    Kết quả

    v-model not number

    Vậy bây giờ làm sao ????

    Bình tĩnh, bình tĩnh. . . :)))

    Nhớ các Modifiers dành cho v-model không ?

    • .lazy
    • .number
    • .capitalize
    • .trim

    Ừa ! Cái này nè ! Nhưng mà nói trước là xài không được đâu !

    Thử đi :

    <MyStudentCmp 
        v-model:studentAge.number="studentAge"
    ></MyStudentCmp>
    *Lưu ý là modifier bắt buộc nằm sau modelValue nhá -_-

    v-model Modifiers

    Thôi không mất thời gian nữa ! Nhìn hình trước đi rồi giải thích sau nhé

    vue mastery v-model modifier

    Sau khi thêm modifiers –> ta có behind the scene ()

    Vue sẽ tự động thêm cho ta Prop riêng dành riêng cho Modifier

    Như này …

    Lúc đầu nếu không có Modifier –> nó sẽ rỗng

    Khi mà ta thêm Modifier vào

    Với Prop này –> ta có thể check xem modifier nào đã được thêm vào !!!

    vd : this.salutationModifiers === true ?

    Tới đây ổn chưa ??

    Tận dụng Modifier Props

    <template>
    
        <input type="text"
                :value="modelValue"
                @input="emitValue">
    
    </template>
    
    <script>
    export default {
      props: {
        modelValue: String,
        modelModifiers: {
          default: () => ({}),
        },
      },
      methods: {
        emitValue(e) {
          let value = e.target.value;
          if (this.modelModifiers.capitalize) {
            value = value.charAt(0).toUpperCase() + value.slice(1);
          }
          this.$emit("update:modelValue", value);
        },
      },
    };
    </script>

    Sau khi check xem nếu có modifier : capitalize –> $emit giá trị được capitalized manually (bằng tay)

    Cũng chẳng biết nếu mà xài .lazy modifier thì xử lý kiểu gì nữa :)))

    Kết bài nào !

    Vậy là ta đã hiểu được cách sử dụng v-model một cách hoàn thiện rồi đó :))

    Cám ơn vì đã đọc bài viết nhé ! Nếu mà có ý kiến gì thì cứ phản ảnh bên dưới nhé mng

    Hãy cho Thịnh 1 Like 1 Share nhé mng ! Nó ý nghĩa rất nhiều với Thịnh đó <3

    http://34.129.206.227/vuejs-component-giao-tiep-voi-nhau-nhu-the-nao/
    http://34.129.206.227/vuejs-non-prop-attributes/
    Published inDành cho mọi ngườiVue Core

    Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *