Vue.js: 변경 시 호출 함수

Vue.js: 변경 시 호출 함수

Vue.js에서 부품을 만들고 있어요사용자가 일정 금액을 요청할 수 있는 페이지에 입력이 있습니다.현재 입력 시 입력량을 콘솔에 기록하는 기능을 만들려고 합니다.(결국 사용자 입력에 따라 요청하신 문서를 표시/숨깁니다.)송신 버튼을 클릭할 필요는 없습니다.)

다음 코드는 입력 필드를 탭/클릭하면 기록됩니다.여기 제 부품이 있습니다.vue:

<template>
    <div class="col s12 m4">
      <div class="card large">
        <div class="card-content">
          <span class="card-title">Credit Limit Request</span>
          <form action="">
            <div class="input-field">
              <input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text">
              <label for="credit-limit-input">Credit Limit Amount</label>
            </div>
          </form>
          <p>1. If requesting $50,000 or more, please attach Current Balance Sheet (less than 1 yr old).</p>
          <p>2. If requesting $250,000 or more, also attach Current Income Statement and Latest Income Tax Return.</p>
        </div>
      </div>    
    </div>
  </div>
</template>

<script>
export default {
  name: 'licenserow',
  data: () => ({
    creditLimit: ""
  }),
  methods: {
    logCreditLimit: function (){
      console.log(this.creditLimit)
    }
  }
}
</script>

내가 바뀌면methods로.computed동작합니다만, 다음과 같은 에러가 표시됩니다.Invalid handler for event: change값을 기록할 때마다 표시됩니다.

를 사용합니다.input이벤트입니다.

<input v-model="creditLimit" v-on:input="logCreditLimit" id="credit-limit-input" type="text">

change 요소가 입력 요소에 대해 포커스를 잃었을 때만 기동됩니다. input텍스트가 변경될 때마다 기동됩니다.

v-model과 함께 @input 이벤트를 바인딩할 필요가 없습니다.v-model만 바인딩하면 됩니다.모형 자동으로 입력 이벤트에 업데이트됩니다.

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="message"><br>
  Output: <span>{{ message }}</span>
</div>

필요 시 그리고 변화에 특히 감시인을 위로하는데, 로그인하십시오.

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  watch: {
    message: function (value) {
      console.log(value) // log it BEFORE model is changed
    }
  }
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="message"><br>
  Output: <span>{{ message }}</span>
</div>

<input v-model="yourVariableName" @input="yourFunctinNameToBeCall" id="test" type="text">

당신은 것 Ex- 선택 드롭 다운에서 값을 작업이 완료되면 기능을 일으키@ 변화 사용할 수 있다.

하지만 여길 때 키(수치는 입력하)를 누르면 함수를 호출해야 할 필요가 있다.따라서 이럴 경우에@ 클릭을 사용한다.

언급URL:https://stackoverflow.com/questions/46305448/vue-js-calling-function-on-change