1

Estoy tratando de definir variables dinamicas para VUE, para luego usarlas en v-for. al cargar la pagina funcionan, pero si luego cambio sus valores, ya no cambian los valores en la vista.

VUE

const app = new Vue({
        el: '#mainCreate',
        data: {
            modules : [],
            feature: []
        },
    });

Esta función la estoy usando para generar las variables dentro de feature:

 /*crea dinamicamente los feautres en module*/
    function creatDataFeatures (){
        $.each(app.modules, function(index,module){
            app.feature[index] = module.features;
        });
    }

Así la estoy cargando en la vista:

<!-- caracteristicas-->
<table class="table table-striped mt-3">
   <tbody>
      <tr v-for="feat in feature[index]">
           <td>
              <input type="checkbox" checked>
          </td>
           <td>
              @{{feat.title}}
           </td>
           <td class="text-info">
              @{{feat.price ? '$ '+feat.price : '$ 0'}}
           </td>
        </tr>
     </tbody>
   </table>

Al cargar la pagina me carga los datos correctamente, pero si luego cambio los valores ejm: feature[index] = [other array] (lo cambio por el mismo formato de datos que los del inicio) en la vista no cambia nada. una solución o una alternativa estarían genial.

1
  • Estaria bueno saber como armas el otro array. ya que estas tomando variables con nombre, en el array deberian tener los mismos nombres.
    – gbianchi
    el 13 mar. 2018 a las 2:16

1 respuesta 1

3

Solucionado

La linea app.feature[index] = module.features; cae en la limitación de Vue con respecto a las matrices.

Se soluciona usando VUE.SET ver: https://v2.vuejs.org/v2/guide/list.html#Caveats

    $.each(app.modules, function(index,module){
        Vue.set(app.feature, index, module.features); // changed this line
    });

Debido a las limitaciones en JavaScript, Vue no puede detectar los siguientes cambios en una matriz:

1.Cuando establece directamente un elemento con el índice, por ejemplo vm.items[indexOfItem] = newValue

2.Cuando se modifica el tamaño del array, ejm. vm.items.length = newLength

Para superar la advertencia 1, ambos de los siguientes harán lo mismo que vm.items[indexOfItem] = newValue, pero también activarán las actualizaciones de estado en el sistema de reactividad:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

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.