matfish2 / vue-formular

a comprehensive vue.js form component
https://www.npmjs.com/package/vue-formular
MIT License
43 stars 11 forks source link

Issue in V-Select #7

Closed rkrishnamoorthy closed 8 years ago

rkrishnamoorthy commented 8 years ago

Hi, I am not sure if this is something I am doing wrong but the value returned by the v-select with the version of formular i am running returns the value of the "text" of the option instead of the id

when I copied some of my code into the demo fiddle, it returns the id correctly when i log the changed event.

what is the version of vue and vue-formular on the fiddle ?

matfish2 commented 8 years ago

Can you paste the relevant code?

rkrishnamoorthy commented 8 years ago

`

                <vf-status-bar></vf-status-bar>
                <h2 class="_1X7gbWnyciC8DvhjBfqI70">Client Information</h2>
                <vf-text label="" placeholder="First Name *" name="model.client_info.first_name"  class=""></vf-text>
                <vf-text label="" placeholder="Last Name *" name="model.client_info.last_name"  class=""></vf-text>
                <vf-text placeholder="Company Name" name="model.client_info.company_name"  class=""></vf-text>
                <div class="row">model.client_info
                    <div class="col-lg-6 col-md-12 col-xs-12">
                        <vf-text placeholder="Home Phone" name="model.client_info.home_phone"  class="lg-6"></vf-text>
                    </div>
                    <div class="col-lg-6 col-md-12 col-xs-12">
                        <vf-text placeholder="Mobile Phone *" name="model.client_info.mobile_phone"  class=""></vf-text>
                    </div>
                </div>
                <vf-text placeholder="Email *" name="model.client_info.email_id"  class=""></vf-text>
                <vf-text placeholder="Address" name="model.client_info.address1"  class=""></vf-text>
                <vf-text placeholder="Address" name="model.client_info.address2"  class=""></vf-text>
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-xs-12">
                        <vf-text placeholder="City" name="model.client_info.city"  class="lg-6"></vf-text>
                    </div>
                    <div class="col-lg-3 col-md-12 col-xs-12">
                        <vf-select select2 name="model.client_info.state_code"  :items="us_states"></vf-select>
                    </div>
                    <div class="col-lg-3 col-md-12 col-xs-12">
                        <vf-text name="model.client_info.zip_code" placeholder="Zip" class=""></vf-select>
                    </div>

                </div>

                <vf-submit></vf-submit>
            </vf-form>

        </form>

`


   data() {
        return {
                            us_states: [{
                text: "Alabama",
                id: "AL"
            },
            {
                id: "AK",
                text: "Alaska"
            },
            {
                id: "AS",
                text: "American Samoa"
            },
            {
                id: "AZ",
                text: "Arizona"
            },
            {
                id: "AR",
                text: "Arkansas"
            },
            {
                id: "CA",
                text: "California"
            },
            {
                id: "CO",
                text: "Colorado"
            },
            {
                id: "CT",
                text: "Connecticut"
            },
            {
                id: "DE",
                text: "Delaware"
            },
            {
                id: "DC",
                text: "District Of Columbia"
            },
            {
                id: "FL",
                text: "Florida"
            },
            {
                id: "GA",
                text: "Georgia"
            },
            {
                id: "GU",
                text: "Guam"
            },
            {
                id: "HI",
                text: "Hawaii"
            },
            {
                id: "ID",
                text: "Idaho"
            },
            {
                id: "IL",
                text: "Illinois"
            },
            {
                id: "IN",
                text: "Indiana"
            },
            {
                id: "IA",
                text: "Iowa"
            },
            {
                id: "KS",
                text: "Kansas"
            },
            {
                id: "KY",
                text: "Kentucky"
            },
            {
                id: "LA",
                text: "Louisiana"
            },
            {
                id: "ME",
                text: "Maine"
            },
            {
                id: "MH",
                text: "Marshall Islands"
            },
            {
                id: "MD",
                text: "Maryland"
            },
            {
                id: "MA",
                text: "Massachusetts"
            },
            {
                id: "MI",
                text: "Michigan"
            },
            {
                id: "MN",
                text: "Minnesota"
            },
            {
                id: "MS",
                text: "Mississippi"
            },
            {
                id: "MO",
                text: "Missouri"
            },
            {
                id: "MT",
                text: "Montana"
            },
            {
                id: "NE",
                text: "Nebraska"
            },
            {
                id: "NV",
                text: "Nevada"
            },
            {
                id: "NH",
                text: "New Hampshire"
            },
            {
                id: "NJ",
                text: "New Jersey"
            },
            {
                id: "NM",
                text: "New Mexico"
            },
            {
                id: "NY",
                text: "New York"
            },
            {
                id: "NC",
                text: "North Carolina"
            },
            {
                id: "ND",
                text: "North Dakota"
            },
            {
                id: "MP",
                text: "Northern Mariana Islands"
            },
            {
                id: "OH",
                text: "Ohio"
            },
            {
                id: "OK",
                text: "Oklahoma"
            },
            {
                id: "OR",
                text: "Oregon"
            },
            {
                id: "PW",
                text: "Palau"
            },
            {
                id: "PA",
                text: "Pennsylvania"
            },
            {
                id: "PR",
                text: "Puerto Rico"
            },
            {
                id: "RI",
                text: "Rhode Island"
            },
            {
                id: "SC",
                text: "South Carolina"
            },
            {
                id: "SD",
                text: "South Dakota"
            },
            {
                id: "TN",
                text: "Tennessee"
            },
            {
                id: "TX",
                text: "Texas"
            },
            {
                id: "UT",
                text: "Utah"
            },
            {
                id: "VT",
                text: "Vermont"
            },
            {
                id: "VI",
                text: "Virgin Islands"
            },
            {
                id: "VA",
                text: "Virginia"
            },
            {
                id: "WA",
                text: "Washington"
            },
            {
                id: "WV",
                text: "West Virginia"
            },
            {
                id: "WI",
                text: "Wisconsin"
            },
            {
                id: "WY",
                text: "Wyoming",
            }]
        }
    },
events: {
        'vue-formular.change' : function(field) {
            console.log(JSON.stringify(field))
        }
    }

The output of the above is

{"name":"model.client_info.state_code","value":"Kentucky","oldValue":"District Of Columbia"}

while it should be something like

{"name":"model.client_info.state_code", value: "MO", oldValue: "ME"}

matfish2 commented 8 years ago

Which version of select2 are you using? This only works with 4.0.0.

rkrishnamoorthy commented 8 years ago

Same result with or without select2

Node Version: 4.4.5 "vue": "^1.0.26", "vue-formular": "^0.9.15", "vue-resource": "^0.9.3", "vue-router": "^0.7.5", "vue-strap": "^1.0.11",

On Tue, Jul 12, 2016 at 4:11 PM, Matanya notifications@github.com wrote:

Which version of select2 are you using? This only works with 4.0.0.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/matfish2/vue-formular/issues/7#issuecomment-231968803, or mute the thread https://github.com/notifications/unsubscribe/AJa3KNkiHx5yF31MQ7jm1jKxx5VNF-Usks5qU0wigaJpZM4JKCAN .

matfish2 commented 8 years ago

I have recently changed the value key in lists from value to id. The behavior you are describing sounds consistent with the old code still in place. Can you please check the select.html template in your node_modules folder and see what the value key is?

rkrishnamoorthy commented 8 years ago

Hi Here is the select html. Yes it seems to be keyed to "value". I just installed from NPM today so not sure how i got this old version

<select name="{{name}}{{arraySymbol}}" :disabled="disabled" v-model="value" multiple={{multiple}} class="form-control"> <option v-if="!noDefault && !select2 && !multiple" value="">{{placeholder}} <option v-for="item in items" v-if="passesFilter(item)" value="{{item.value}}">{{item.text}} <option v-if="selected && ajaxUrl" v-for="item in selected" value="{{item.value}}" selected>{{item.text}}

On Tue, Jul 12, 2016 at 4:34 PM, Matanya notifications@github.com wrote:

I have recently changed the value key in lists from value to id. The behavior you are describing sounds consistent with the old code still in place. Can you please check the "select.html" template and see what the value key is?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/matfish2/vue-formular/issues/7#issuecomment-231973875, or mute the thread https://github.com/notifications/unsubscribe/AJa3KLUWPwb4VT9jRttLepDjdIZMJKLrks5qU1GUgaJpZM4JKCAN .

matfish2 commented 8 years ago

Odd. probably some caching issue. Try to manually delete the vue-formular folder and reinstall

rkrishnamoorthy commented 8 years ago

Did the same.npm installed 0.8.1 instead of 0.9.15. You were right that this is an old version

deleted the vue-formular folder, did a cache clean. still installing 0.8.1

Now that I have a clue..will look into it further and update you

On Tue, Jul 12, 2016 at 4:45 PM, Matanya notifications@github.com wrote:

Odd. probably some caching issue. Try to manually delete the vue-formular folder and reinstall?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/matfish2/vue-formular/issues/7#issuecomment-231976322, or mute the thread https://github.com/notifications/unsubscribe/AJa3KGrEKIwtQlETpssRz3iD5wf4ZzIKks5qU1QggaJpZM4JKCAN .

matfish2 commented 8 years ago

I believe you can force it to install a version by doing npm install vue-formular@0.9.15

rkrishnamoorthy commented 8 years ago

Thank you ! that worked

my package.json was doing the right thing and NPM was messing up

Again, thanks a lot

On Tue, Jul 12, 2016 at 4:50 PM, Matanya notifications@github.com wrote:

I believe you can force it to install a version by doing npm install vue-formular@0.9.15

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/matfish2/vue-formular/issues/7#issuecomment-231977567, or mute the thread https://github.com/notifications/unsubscribe/AJa3KLF9KVaSJHD0UXhQ_sa_m_1r5Gtxks5qU1VygaJpZM4JKCAN .