1

I am using VueJS and having one html form like below and creating dynamic inputs when clicking on "Add" button. When entering some values in that textbox, its automatically getting updated into the object.

But, problem which I am facing here is, if I enter values like 1234 or false or any string, its taking as "1234", "false", "test_value". For string, double quotes qre fine. But for numbers and booleans, how I will eliminate the quotes when entering the value. Why this is happening? Any idea regarding this?

<div class="attribute-modify-header-display pull-right">
    <button type="button" name="button" @click="addNewValueInput" class="btn btn-primary">Add</button>
</div>

<table class="table vmiddle no-padding hover table-striped">
    <thead>
        <tr>
            <td><strong>Value</strong></td>
        </tr>
    </thead>
    <tbody >
        <tr v-for="(key, index) in attributeNewArr" v-bind:key=value>
            <td>
                <input type="text" v-model="key.value">
            </td>
        </tr>
    </tbody>
</table>

This is the method where I am pushing the object,

addNewValueInput: function() {
        let vm = this;
        vm.attributeNewArr.push({
            value: '',
            weight: 1 // This is default value
        });
        vm.$set(vm.attributeNewArr, vm.value, vm.weight);
        console.log(vm.attributeNewArr);
    },

While printing this,

[
    {
        "value": "1234",
        "weight": 1
    },
    {
        "value": "false",
        "weight": 1
    },
    {
        "value": "test_value",
        "weight": 1
    }
]

When printing the "attributeNewArr", always I am getting double quotes for numbers, Boolean. Any help will be much appreciated.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
kalaiyarasi M
  • 261
  • 2
  • 11
  • 2
    Anything you get from a `` value will be a string. That's just how they work. Why is this important? – Phil Apr 21 '20 at 07:20
  • I need to send this data to API, there they are calling some methods using the values which entering from here. So, "false" and "1234" types are not working for them. How to achieve this? Instead of text, which type of input to use for Boolean and numbers? Then i need to keep one condition to display input based on the selection like text or Boolean or Number – kalaiyarasi M Apr 21 '20 at 07:27
  • 1
    I suggest then you use [`v-model.number`](https://vuejs.org/v2/guide/forms.html#number) for numbers and [``](https://vuejs.org/v2/guide/forms.html#Checkbox) for Booleans but you'll need to know for which entries to use them. Otherwise, you'll need to do some [number](https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number) / Boolean detection in the strings and parse them accordingly – Phil Apr 21 '20 at 07:29

0 Answers0