getting value of dropdownlist using vue.js

Question

I'm trying to get the value of a drop down list and change the div content using a get request view

 <div class="row row-mb2" id="Produit-tab">
 @Html.DropDownList("Version", new SelectList(ViewBag.Versions, "IdVersion", "VersionProduit"), new { @id = "version" })
 </div>

<div id="versiondetails"></div>

script :

 $.Produit.settingsView = new Vue({
            el: '#Produit-tab',
            data:
                {
                version:''
                },
            watch: {
                version: function (versionprod) {
                    $.get("@Url.Action("Details", "VersionProduit", new {id = "_PARAM_" })".replace("_PARAM_", versionprod), function (data) {

                        $('#VersionDetails').html(data);
                    });
                }
            }//,.....rest of the code

I'm usually using vue.js with input using v-model="..." but with razor i can't inject a vue.js attribut i tried this but it razor doesn't accept it

 @Html.DropDownList("Version", new SelectList(ViewBag.Versions, "IdVersion", "VersionProduit"), new { @id = "version" ,@v-Model="version" })

No i can't use that , i need to use a viewbag because the the items in dropdownlist are not fixed — Bchir Med Amine, Mar 21 '17 at 13:10
How about using `v_model` as per http://stackoverflow.com/a/9444822/392102 — Roy J, Mar 21 '17 at 13:17
oh i didn't know that using per with ' - ' have to become ' _ ' in razor thanks — Bchir Med Amine, Mar 21 '17 at 13:32

Sagar Shinde · Answer 1 · 2018-09-06T05:43:39.357

1

use @v_model insted of @v-Model it will solve your problem.

@Html.DropDownList("Version", new SelectList(ViewBag.Versions, "IdVersion", "VersionProduit"), new { @id = "version" ,@v_model="version" })

edited Sep 06 '18 at 05:43

answered Nov 06 '17 at 08:29

Sagar Shinde

150
10

please make use of the `code formatting` provided by SO. Select your code and press Ctrl + K to highlight it as such – Neuron Nov 06 '17 at 09:01

getting value of dropdownlist using vue.js

1 Answers1