강제 입력 양식이 vue.js의 대문자에서 백엔드로 입력됩니다.

Question

'a001'을 입력하려했는데 CSS 규칙 때문에 'A001'이 표시됩니다. 백엔드로 전달하기 전에 그것을 대문자로 변환하는 가장 좋은 방법은 무엇입니까?

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
     console.log('clicked id=', this.myid) 
 
    } 
 
    } 
 
});

div input { 
 
    text-transform: uppercase 
 
}

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

Answer 1

HTML :

<div id="app"> 
    <input type="text" v-model="message" /> 
    <h4>{{ message | uppercase }}</h4> 
</div> 

컨트롤러 :

Vue.filter('uppercase', function (value) { 
    return value.toUpperCase() 
}) 

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

나는이 문제를 해결 바랍니다. 당신은 단지 값을 표시하지 않고 대문자로 전달하려면

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    myid: '' 
 
    }, 
 
    methods: { 
 
    click: function() { 
 
    var str = this.myid.toUpperCase(); 
 
     console.log('clicked id=', str) 
 
    } 
 
    } 
 
});

div input { 
 
    text-transform: uppercase 
 
}

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="myid" placeholder="My ID" /> 
 
    <button type="button" @click="click">Submit</button> 
 
</div>

는 이제 CSS 규칙을 제거 할 수 있습니다 또는 중 하나를 수행 할 수 있습니다 당신은 자바 스크립트 기능을 사용할 수 있습니다

Answer 2

이 같은 toUpperCase()라고 보관해라. 도움이 되길 바랍니다.