본문 바로가기
Framework/vue_Foundation

v-model / form handling (vue.js)

by cariño 2023. 1. 5.
728x90
반응형

Form Handling

 

1. Capture user inputs

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" v-model="formValues.name" />
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        name: "",
      },
    };
  },
};
</script>

 

2. Inputs,   Textareas

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form @submit="sumitForm">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" v-model="formValues.name" />
    </div>

    <div>
      <label for="profile">Profile Summary</label>
      <textarea id="profile" v-model="formValues.profileSummary" />
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        name: "",
        Profile: "",
      },
    };
  },
};
</script>

 

3. Single select dropdown control

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <div>
      <label for="country">Country</label>
      <select id="country" v-model="formValues.country">
        <option value="india">india</option>
        <option value="vietnam">vietnam</option>
        <option value="singapore">singapore</option>
      </select>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        country: "",
      },
    };
  },
};
</script>

 

3. Multi select control

multiple옵션을 추가해주면 여러개 선택이 가능하다.

ctrl, shift 키랑 같이 눌러주면 복수 선택되어진다. 

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <div>
      <label for="job-location">JOB Location</label>
      <select multiple id="job-location" v-model="formValues.jobLocation">
        <option value="india">india</option>
        <option value="vietnam">vietnam</option>
        <option value="singapore">singapore</option>
      </select>
    </div>

  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        jobLocation: [],
      },
    };
  },
};
</script>

 

4. Checkbox

ture-value, false-value를 이용해서 토글데이터에 입력되는 값을 지정해 줄 수 있다.

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <!-- 
    <div>
      <label for="remoteWork">Open to remote work?</label>
      <input type="checkbox" id="remoteWork" v-model="formValues.remoteWork" />
    </div>
    -->

    <div>
      <label for="remoteWork">Open to remote work?</label>
      <input
        type="checkbox"
        id="remoteWork"
        v-model="formValues.remoteWork"
        true-value="yes"
        false-value="no"
      />
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        remoteWork: false,
      },
    };
  },
};
</script>

 

5. Checkbox group

여러개 선택시 data에 배열로 초기화 해준다. 

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <div>
      <label>Skill</label>
      <input
        type="checkbox"
        id="html"
        value="html"
        v-model="formValues.skillSet"
      />
      <label for="javascript">html</label>
      <input
        type="checkbox"
        id="javascript"
        value="javascript"
        v-model="formValues.skillSet"
      />
      <label for="javascript">javascript</label>
      <input
        type="checkbox"
        id="css"
        value="css"
        v-model="formValues.skillSet"
      />
      <label for="javascript">css</label>
    </div>
    <div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        skillSet: [],
      },
    };
  },
};
</script>

 

6. Radio

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form>
    <div>
      <h2>years of experience</h2>
      <input
        type="radio"
        id="0-2"
        value="0-2"
        v-model="formValues.yearOfExperience"
      />
      <label for="0-2">0-2</label>
      <input
        type="radio"
        id="3-5"
        value="3-5"
        v-model="formValues.yearOfExperience"
      />
      <label for="3-5">3-5</label>
      <input
        type="radio"
        id="5-10"
        value="5-10"
        v-model="formValues.yearOfExperience"
      />
      <label for="5-10">5-10</label>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        yearOfExperience: "",
      },
    };
  },
};
</script>

 

 

7.  Submit form data

<template>
  <div>
    <pre>
      {{ JSON.stringify(formValues, null, 2) }}
    </pre>
  </div>
  <form @submit="sumitForm">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" v-model="formValues.name" />
    </div>

    <div>
      <label for="Profile">Profile Summary</label>
      <input type="text" id="Profile" v-model="formValues.Profile" />
    </div>

    <div>
      <label for="country">Country</label>
      <select id="country" v-model="formValues.country">
        <option value="india">india</option>
        <option value="vietnam">vietnam</option>
        <option value="singapore">singapore</option>
      </select>
    </div>

    <div>
      <label for="job-location">JOB Location</label>
      <select multiple id="job-location" v-model="formValues.jobLocation">
        <option value="india">india</option>
        <option value="vietnam">vietnam</option>
        <option value="singapore">singapore</option>
      </select>
    </div>

    <div>
      <label for="remoteWork">Open to remote work?</label>
      <input
        type="checkbox"
        id="remoteWork"
        v-model="formValues.remoteWork"
        true-value="yes"
        false-value="no"
      />
    </div>

    <div>
      <label>Skill</label>

      <input
        type="checkbox"
        id="html"
        value="html"
        v-model="formValues.skillSet"
      />
      <label for="javascript">html</label>

      <input
        type="checkbox"
        id="javascript"
        value="javascript"
        v-model="formValues.skillSet"
      />
      <label for="javascript">javascript</label>
      <input
        type="checkbox"
        id="css"
        value="css"
        v-model="formValues.skillSet"
      />
      <label for="javascript">css</label>
    </div>

    <div>
      <h2>years of experience</h2>

      <input
        type="radio"
        id="0-2"
        value="0-2"
        v-model="formValues.yearOfExperience"
      />
      <label for="0-2">0-2</label>

      <input
        type="radio"
        id="3-5"
        value="3-5"
        v-model="formValues.yearOfExperience"
      />
      <label for="3-5">3-5</label>
      <input
        type="radio"
        id="5-10"
        value="5-10"
        v-model="formValues.yearOfExperience"
      />
      <label for="5-10">5-10</label>
    </div>
    <button>submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formValues: {
        name: "",
        Profile: "",
        country: "",
        jobLocation: [],
        remoteWork: false,
        skillSet: [],
        yearOfExperience: "",
      },
    };
  },
  methods: {
    sumitForm(event) {
      event.preventDefault();
      console.log(this.formValues);
    },
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
.underline {
  text-decoration: underline;
}
.promoted {
  font-style: italic;
}
.new {
  color: olivedrab;
}
.sold-out {
  color: red;
}
label {
  font-weight: bold;
  display: flex;
  margin-bottom: 5px;
}
input + label {
  font-weight: bold;
  display: inline-flex;
  margin-right: 20px;
}
input[type="text"],
textarea,
select {
  display: block;
  width: 400px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

 

 

[v-model Modifier]

주로 form에 데이터 바인딩에 사용한다.

기존의 React에서는 input에 value 값을 핸들링 하기 위해선 inputHandle이라는 함수를 만들어 event의 target value를 가져와 state에 연결하는 형식으로 인풋을 컨트롤 했었다면, vue에서는 v-model에 연결 시켜 줌으로써 양방향 데이터 바인딩이 가능해진다. 

 

https://velog.io/@9bin08/Vue-%EB%A7%88%EB%B2%95%EA%B0%99%EC%9D%80-v-model%EC%97%90-%EB%8C%80%ED%95%B4

 

Vue - 마법같은 v-model에 대해

Vue.js로 Form 요소를 개발할 때 사용하는 v-model 속성에 대해서 알아보겠다. 이 속성은 그냥 사용하면 그렇게 어렵지 않은데 실제 애플리케이션을 개발할 때는 꽤 주의해서 다뤄야 한다. 무엇보다

velog.io

 

 

 

v-model.trim

input으로 받은 문자열을 자동으로 공백과 개행을 없애주는 수식어이다. 

 

v-model.lazy

<label for="name">Name</label>     
<input type="text" id="name" v-model.trim.lazy="formValues.name" />

입력할 때마다 변경되는 것 말고 다 입력한 후에 변경하고 싶으면 수식어로 ".lazy" 붙여준다.

입력되는 모든 키에 대한 바인딩이 되지 않기 때문에 성능 향상에 도움이 된다. 

input이 아닌 change이벤트 후에 데이터가 연동되도록 하는 수식어이다.

 

v-model.input

input으로 받는 숫자는 문자열이 아닌, int type의 데이터로 들어가게 하는 수식어 이다. 

 

 

v-model.number

<label for="age"></label>   
<input id="age" type="text" v-model.number="formValues.age" />

 

 

@sumit.prevent=""

v-on:submit.prevent 

폼의 기본적인 동작을 막기 위한 modifier로써 흔히 사용하는 event.preventDefault()와 같은 효과

 

@keyup.enter

v-on:keyup.enter

enter키를 눌렀을 때 이벤트 발생한다. 

아래 button submit이 따로 필요하지 않게 되는 상황

 

<input @keyup="printEvent('keyup')"       // 키보드의 키를 눌렀다 뗐을 때
       @keydown="printEvent('keydown')"   // 키보드의 키를 눌렀을 때
       @keypress="printEvent('keypress')" // 키보드의 키를 누르고 있을 때
       v-model="name" />

<input @keyup.tap="printEvent('keyup')"         // tap키를 눌렀다 뗐을 때
       @keydown.space="printEvent('keydown')"   // space키를 눌렀을 때
       @keypress.left="printEvent('keypress')"  // left 키를 누르고 있을 때
       v-model="name" />

data () {
  return {
    name: ''
  }
},
methods: {
  printEvent (val) {
    console.log(val)
  }
}
728x90

'Framework > vue_Foundation' 카테고리의 다른 글

wathcer (vue.js)  (0) 2023.01.05
computed properties (vue.js)  (0) 2023.01.05
Event handling(vue)  (0) 2023.01.05
v-for Directive  (0) 2023.01.05
Conditional Rendering(v-if, v-show)  (0) 2023.01.05

관련글

댓글

티스토리툴바