Vue.js with ASP.NET MVC

Question

I just started trying out Vue.js and applying it to an existing ASP.NET MVC 5 application.

The app has a form with a number of input controls:

<div id="vueApp">
    ...
    @Html.TextBoxFor(model => model.FullName, new { @v_model = "fullName", @class = "form-control input" })

    @Html.TextBoxFor(model => model.Branch, new { @v_model = "branch", @class = "form-control input" })

Some where at the end there's a summary to let users review the data before submitting:

<label>Name</label>: {{ fullName }}

<label>Branch</label>: {{ branch }}

The script is as follows:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript">
    myObject = new Vue({
        el: '#vueApp',
        data: {
            fullName: '',
            branch: ''
        }
    })
</script>

This works fine if starting with all fields empty. However, if some fields are initialized with values from the server, or when used to Edit existing records, the fields are shown as empty.

corix010 · Accepted Answer · 2019-09-14 03:27:41Z

1

There could be more elegant way to do this but one simple way I think that should work is to update your script:

<script type="text/javascript">
    var fullNameVal = $('#FullName').val();
    var branchVal = $('#Branch').val();

    myObject = new Vue({
        el: '#vueApp',
        data: {
            fullName: fullNameVal,
            branch: branchVal
        }
    })
</script>

answered Sep 14, 2019 at 3:27

corix010

5711 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patee Gutee Over a year ago

I'm going to try this out later as I don't have my dev machine with me right now. This looks promising though.

Collectives™ on Stack Overflow

Vue.js with ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related