[vuejs] v-model, input, select, watch

1. v-model은 데이터의 양방향 바인딩을 지원한다고 한다.

2. 한글, 일본어, 중국어는 한 글자를 완전히 타이핑해야 인식을 한다.

3. 한글을 지원하는 v-model을 사용하고 싶으면 v-on과 v-bind을 조합한 컴포넌트를 사용하는 것이 대안이 될 수 있다.

4. input v-model 예시

5. watch로 인풋값을 제어한다.

6. select v-model 예시

 

1. v-model은 데이터의 양방향 바인딩을 지원한다고 한다.

2. 한글, 일본어, 중국어는 한 글자를 완전히 타이핑해야 인식을 한다.

3. 한글을 지원하는 v-model을 사용하고 싶으면 v-on과 v-bind을 조합한 컴포넌트를 사용하는 것이 대안이 될 수 있다.

<template>
  <input :value="value" @input="updateInput">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateInput: function(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

<template>
  <div>
    <InputComp v-model="inputText"/>
  </div>
</template>

<script>
import InputComp from './InputComp.vue';

export default {
  components: {
    InputComp,
  },
  data: function() {
    return {
      inputText: ''
    }
  }
}
</script>

4. input v-model 예시

5. watch로 인풋값을 제어한다.

• vue 용 validator 모듈을 사용하면 watcher 기능 안 써도 됨
• https://github.com/kazupon/vue-validator
• https://github.com/logaretm/vee-validate
• https://github.com/semisleep/simple-vue-validator 

6. select v-model 예시