Hi,

  I was trying to  work with Vue to  update elements but it is not working. I  noticed two issues:

1. bind works for hidden element type but not text type.
2. it works on page load only. It does not update elements.

<div class="price-input" id="appProd">
            <label asp-for="CustomerEnteredPrice" class="enter-price-label">@Loc["Products.EnterProductPrice"] </label>
          
            *<input asp-for="CustomerEnteredPrice" :value="gPrice" type="hidden" class="form-control enter-price-input" />
            <input v-on :value='value' />
            <input v-model="price" placeholder="edit me">
            <p>Message is: {{ price }}</p>
        </div>
        <div class="price-range pt-1">
            @Model.CustomerEnteredPriceRange
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#appProd',
            data() {
                return {
                    gPrice: 14, value: 33, price: 32,
                    polling: null
                }
            },
            methods: {
                pollData() {
                    this.polling = setInterval(() => {
                        this.goldPrice = this.gPrice + 1;
                        //alert(this.gPrice);
                    }, 5000)
                }
            },
            beforeDestroy() {
                clearInterval(this.polling)
            },
            created() {
                this.pollData()
            }
            
        })
    </script>

this code was added to the _Addtocart.cshtml

Am I missing  something?

Hi there,
First of all you can't use "app" for this because this name is used on project as well.
You can change it to something similar ex. "appe".
Script tag should have

 asp-location="Header"

Nextly use this before variables in HTML for example :
"gPrice" to "appe.gPrice".

Best regards,
Daniel

GrandNode Team