VueJS v-model not working on select tag when bound with dynamic property

Question

I am building an application which will generate a dynamic form for customer feedback reception. Now while adding fields to the form, individual fields have validation rules inlcuding length and type rules, there is also going to be a property on each validation rule, which will determine if that particular rule should be parsed while validating the fields.

I have a Vue data property called fields, which has an object for each field. It looks like this:

export default {

    data() {
        return {
            fields: [{
                label: 'Email',
                validation: {
                    length: {
                        add: 0, // 0 for false, 1 for true
                        min: 0, // minimum length
                        max: 0 // maximum length
                    }
                }
            }]
        }
    }

}

Now for enabling the user to select whether validation rule should be enabled or disabled (i.e length.add = 1 or 0) , I have a a select element with two options for their respective values (0 and 1). Here is the template code:

<div v-for="(field, index) in fields">
    <div v-for="(rule, key) in field.validation">
       <select class="form-control" v-model="fields[index].validation[key].add">
         <option :value="1">Enabled</option>
         <option :value="0">Disabled</option>
       </select>
    </div>
</div>

Everything is working fine such as the v-model on select is mutating the value in the data property, but the select isn't showing the default value which is selected, here is what it looks like after rendering:

Can someone please tell me why isn't it working? I also tried replacing v-model with the value attribute, but no luck!

@Deda Weird! This is the same code in my application, but it isn't working! — Abbas, Sep 05 '19 at 11:53
@Deda I do have the :key attrs, just not in this code, But yeah I don't have :key on the inner loop — Abbas, Sep 05 '19 at 11:58
My guess would be a type mismatch. Is there any chance that in your real code you've got strings for `'0'` or `'1'` creeping in rather than numbers? — skirtle, Sep 05 '19 at 11:59
What CSS style have you applied on your select tag? As @Deda, it works fine (even without :key fields) on JSFiddle. — Sackey, Sep 05 '19 at 12:01
@skirtle Chek this out, these are the data properties, showing numbers and not strings. image: https://ibb.co/x1wBsQQ — Abbas, Sep 05 '19 at 12:03
Make sure the `fields[index].validation[key].add` is `0` or `1`, to test this just do ` — talkhabi, Sep 05 '19 at 12:09

score 1 · Answer 1 · answered Sep 05 '19 at 11:57

Hi I think you should try the :key attribute in the options field. Set there the value for the key. The first option should have the value 0 and the second option should have the value 1. Now there should be a mapping between the values.

<div v-for="(field, index) in fields">
    <div v-for="(rule, key) in field.validation">
       <select class="form-control" v-model="fields[index].validation[key].add">
         <option :key="1" :value="1">Enabled</option>
         <option :value="0" :value="0">Disabled</option>
       </select>
    </div>
</div>

score 0 · Answer 2 · answered Sep 05 '19 at 12:08

0

Found the problem, it was the WIDTH! The width of the select tag was to short, hence it wasn't showing the actual text XD XD

answered Sep 05 '19 at 12:08

Abbas

1,118
1
11
25

VueJS v-model not working on select tag when bound with dynamic property

2 Answers2