En mi aplicación Vue, tengo una línea de código muy pequeña basada en un bucle v-for y funciona hasta que le lanzo un V-IF.
LAS SIGUIENTES OBRAS:
<div v-for="date in dates" :key="date"> <th v-for="store in stores">@{{store.stock}}</th> </div> Sin embargo, cuando trato de hacer que solo muestre ese valor si la fecha en el objeto coincide con el objeto de fechas, obtengo que la store no está definida
<div v-for="date in dates" :key="date"> <div v-for="store in stores"> <th v-if="store.date === date">@{{store.stock}}</th> </div> </div>Aquí están mis objetos:
stores: [ { store: "123", date: "2021-09-01", stock: "145" } ] dates: [ { date: "2021-09-01" } ]¿Por qué tengo este problema cuando trato de hacer coincidir las fechas en el v-if?
Cometiste un pequeño error. ¡la date debe ser date.date !
<div v-for="date in dates" :key="date"> <div v-for="store in stores"> <th v-if="store.date === date.date">@{{store.stock}}</th> </div> </div>en lugar de usar v-if con v-for, puede usar computated para obtener la tienda que necesita mostrar y luego usar solo una v-for
<template> <div> <div v-for="store in activeStore" :key="store.stock" > {{ store.date }} </div> </div> </template> <script> export default ({ data() { return { count: 1110, stores: [{ store: 'test', date: '2021-09-01', stock: '145' }, { store: 'test', date: '2021-09-02', stock: '146' }, { store: 'test', date: '2021-09-03', stock: '147' }, { store: 'test', date: '2021-09-04', stock: '148' }], dates: ['2021-09-01', '2021-09-02', '2021-09-03', '2021-09-00'] } }, computed: { activeStore: function() { return this.stores.filter((store) => { if (this.dates.includes(store.date)) { return store } }) } } }) </script>Aquí hay una solución simple usando la propiedad calculada
<div v-for="date in dates" :key="date"> <div v-for="(store, indexer) in getFilteredStores(date)" :key="indexer"> <th>@{{store.stock}}</th> </div> </div>y en su computado, defina el controlador a continuación para obtener la tienda para fechas particulares
computed: { getFilteredStores() { return targetDate => { // targetDate is the argument passed to the handler return this.stores.filter(store => store.date === targetDate); } } }