1

Tengo una plantilla con un range para asignar un rango de precio, al cambiar el rango de precio quiero mediante jquery cambiar el valor de las variables minPrice y maxPrice. He intentado mediante dos input, cambiar el valor con jquery y mediante un v-model hacer que ese cambio se translade a vue

            <div class="widget-content">
            <p>Price</p>
            <div class="price search-filter-input">
                <div id="slider-range" class="price-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header" ></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span></div>
                <p class="amount">
                  <input type="text" id="amount" disabled="">
                  <input id="minPrice" v-model="minPrice">
                  <input id="maxPrice" v-model="maxPrice">
                </p>
           </div>
        </div>

Funcion jquery mediante la que cambio el precio

        var FilterPrice = function() {
        if( $().slider ) {
            $( function() {
                $( "#slider-range" ).slider({
                  range: true,
                  min: 18,
                  max: 1000,
                  values: [ 18, 500 ],
                  slide: function( event, ui ) {
                    $( "#amount" ).val( ui.values[ 0 ] + "$" + " - " + ui.values[ 1 ] + "$" );
                    $("#minPrice").val(ui.values[ 0 ]);
                    $("#maxPrice").val(ui.values[ 1 ]);
                  }
                });
                $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) + "$" + " - " + $( "#slider-range" ).slider( "values", 1 ) + "$" );
            });
        }
    }; // Filter Price

Script vue con las variables data

<script>
const filtro = new Vue({
    el: '#filtro',
    data: {
        checkedBrands: [],
        checkedColor: [],
        minPrice: '',
        maxPrice: '',
    },
})
</script>

1 respuesta 1

0

No usar JQuery con Vuejs, esto es mala praxis ya que pueden haber conflicto en el render del DOM. Si deseas cambiar el valor de tus inputs, utiliza el v-model de cada uno.

Mas información: https://v2.vuejs.org/v2/guide/forms.html

1
  • 1
    Saludos César, del enlace extrae un ejemplo, así evitamos que se pierda con el tiempo (algunos enlaces caducan)
    – fredyfx
    Commented el 5 jun. 2019 a las 5:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.