Tengo 2 conjuntos de datos (conjunto de datos A y conjunto de datos B) que contienen información variada, y estoy usando un v-for para generar filas de tabla dinámicamente en función de la longitud del conjunto de datos A.
Sin embargo, ahora estoy tratando de usar un v-if dentro de v-for para verificar si la columna de identificación en el conjunto de datos A coincide con la columna de identificación en el conjunto de datos B. Si es así, mostraré el botón Disponible, de lo contrario mostraré el botón No disponible.
Sin embargo, entiendo que v-if no funciona en v-for. Por lo tanto, ¿existen formas alternativas de abordar esta situación?
Aquí está mi ejemplo de código:
<tr v-for="(dataset, i) in datasetA" :key="i"> <td v-if="checkIfSame(dataset['id']) == true"> <button class="btn btn-primary" :id="dataset['id']"> Available </button> </td> <td v-else>Unavailable</td> </tr> Dentro de mis methods: {} :
checkIfSame: function (id) { this.datasetB.filter(function (item) { return item.id === id; }); },El código que tienes debería estar bien.
No se recomienda utilizar v-for y v-if en el mismo nodo. Por ejemplo, si tuviste esto, no es recomendable:
<tr v-for="(dataset, i) in dataSetA" :key="i" v-if="checkIfSame(dataset['id']) == true"> <td>etc.</td> </tr>La razón es que v-for tiene mayor precedencia que v-if. En ese caso, es mejor usar una propiedad calculada para devolver la lista filtrada.
Lo que tienes en tu ejemplo es:
<topLevelEl v-for="i in z"> <childEl v-if="i === 2"> It's two! </childEl> <childEl v-else> It's not two. </childEl> </topLevelEl> El v-if y v-for no están en el mismo nodo aquí. v-if está en childEl y v-for está en topLevelEl . Esto esta bien. Cualquier cosa excepto el nodo con v-for activado está bien. Todavía puede usarlo en la misma etiqueta HTML nuevamente si está anidado dentro, por lo que, por ejemplo, si tenía topLevelEl anidado nuevamente dentro, también puede usarlo en eso.
Intente como el siguiente fragmento: Cambie su función de verificación a:
checkIfSame(id) { return this.datasetB.find(item => item.id === id) || false }, new Vue({ el: '#demo', data() { return { datasetA: [{id: 1, name: 'aaa'},{id: 2, name: 'bbb'},{id: 3, name: 'ccc'},], datasetB: [{id: 2, name: 'bbb'}] } }, methods: { checkIfSame(id) { return this.datasetB.find(item => item.id === id) || false }, } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tr v-for="(dataset, i) in datasetA" :key="i"> <td v-if="checkIfSame(dataset.id)"> <button class="btn btn-primary" :id="dataset.id"> Available </button> </td> <td v-else>Unavailable</td> </tr> </table> </div>