Tengo un anidada for ... in bucle en vue de js. Lo que estoy tratando de a es omitir los elementos si el valor del elemento es null. Aquí está el código html:

<ul>
    <li v-for="item in items" track-by="id">
        <ol>
            <li v-for="child in item.children" track-by="id"></li>
        </ol>
    </li>
</ul>

null elementos pueden estar presentes en ambos item y item.children objetos.

Por ejemplo:

var data = {
   1: {
      id: 1,
      title: "This should be rendered",
      children: {
          100: {
              id: 100,
              subtitle: "I am a child"
          },
          101: null
      }
   },
   2: null,
   3: {
       id: 3,
       title: "Should should be rendered as well",
       children: {}
   }
};

Con estos datos data[1].children[101] no debe ser prestados y si data[1].children[100] se convierte en nulo posterior debe ser omitido de la lista.

P. S. sé que esto probablemente no es la mejor forma de representar los datos, pero yo no soy responsable de que 🙂

InformationsquelleAutor King Julien | 2016-03-24

3 Comentarios

  1. 15

    Edit: en Realidad, una simple v-si podría funcionar:

    <li v-for="item in items" v-if="item !== null" track-by="id">
    

    Darle una oportunidad. Si no, haga esto:

    Puede agregar un filtro para que (en main.js antes de la instancia de la Aplicación):

    Vue.filter('removeNullProps',function(object) {
      //sorry for using lodash and ES2015 arrow functions :-P
      return _.reject(object, (value) => value === null)
    })
    

    a continuación, en la plantilla:

    <li v-for="item in items | removeNullProps" track-by="id">
        <ol>
            <li v-for="child in item.children | removeNullProps" track-by="id"></li>
        </ol>
    </li>
    
    • Necesidad de vue-subrayado?
    • FYI, Vue js guía de estilo aconseja evitar el uso de v-y v-si en el mismo elemento. vuejs.org/v2/style-guide
    • He tenido algunos problemas con esta respuesta. Pero desde la v-si=»<a la expresión>» terminé con sólo este v-si=»item». si el elemento es nulo, entonces las expresiones serán nulos y no es cierto, y por lo tanto eliminar de la DOM. si tu intención es simplemente ocultar, el uso de v-mostrar en su lugar.
  2. 7

    En Vue 2, los filtros han sido desaprobados en v-fors.

    Ahora usted debe utilizar calculada propiedades. Demo a continuación.

    JS:

    new Vue({
      el: '#app',
      data: {
        items: [
          'item 1',
          'item 2',
          null,
          'item 4',
          null,
          'item 6'
        ]
      },
      computed: {
        nonNullItems: function() {
          return this.items.filter(function(item) {
            return item !== null;
          });
        }
      }
    })

    HTML:

    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
      Using a computed property:
      <ul>
        <li v-for="item in nonNullItems">
          {{ item }}
        </li>
      </ul>
      <hr>
      Using v-if:
      <ul>
        <li v-for="item in items" v-if="item !== null">
          {{ item }}
        </li>
      </ul>
    </div>

  3. 3

    Solo uso v-if a hacer con él. Pero la primera, no utilice track-by="id" debido a la null elemento y null niño. Puede comprobar el demo aquí https://jsfiddle.net/13mtm5zo/1/.

    Quizás la mejor manera de ocuparse de los datos en primer lugar antes de que el render.

Dejar respuesta

Please enter your comment!
Please enter your name here