VueJS: How to set model of an input without having it to be on the input
Question
I want an input to have no value on it's element on the view side but underneath I want it to have a default value, here is some snippet to explain my point:
<input
class="form-control"
v-model="amount"
type="number"
step=".01"
min="0"
required>
</input>
I want amount to be 0 by default but not render 0 on the input, is this possible in vuejs? If the input[type="number"] = '' , the value of the property is 0 and not ' '.
2 answers
solution1
1 ACCPTED 2018-10-31 05:29:01
You can use a computed property with getter and setter. The getter can return an empty string if the value is zero...
new Vue({ el: 'main', data: { amount: 0 }, computed: { formattedAmount: { get () { return this.amount || '' }, set (value) { this.amount = parseFloat(value) || 0 } } } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> <main> <input class="form-control" v-model="formattedAmount" type="number" step=".01" min="0" placeholder="Amount" required/> <pre>amount = {{ amount }}</pre> </main>
solution2
0 2018-10-31 05:18:33
you can bind the model values
var myObject = new Vue({ el: '#app', data: { amount: 0 } })
<!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input class="form-control" v-model="amount" type="number" step=".01" min="0" required> </input> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.