Opción 1
Tienes que crear una computed property y hacer el filtro de tu objeto y luego ese filtro recorrerlo.
Al objeto primero recorro sus keys, luego le hago un map y luego lo filtro. Es un poco complicado ya que es un objeto y filtrarlos no es tan sencillo.
Aquí te dejo el ejemplo de la computed property.
<script>
export default {
name: "Loop",
data() {
return {
items: {
id1: {
descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
imagen: "https://source.unsplash.com/random",
nivel: 1,
nombre: "Carpinteria",
recomendada: true
},
idcat1: {
descripcion: "Lorem ipsum dolor sit amet, consectetu",
imagen: "https://source.unsplash.com/random",
nivel: 1,
nombre: "Arquitectura",
recomendada: false
}
}
};
},
computed: {
filteredList() {
return Object.keys(this.items)
.map(key => this.items[key])
.filter(item => item.recomendada);
}
}
};
</script>
Luego en el template solo lo pintas de esta manera:
<template>
<div>
<li v-for="(item, index) in filteredList" :key="index">{{ item.nombre }}</li>
</div>
</template>
Puedes ver el codigo funcionando en el siguiente enlace: https://codesandbox.io/s/vue-template-lh7l7 El archivo se llama Loop.vue
Opción 2
Por otro lado tambien tienes la opcion mas sencilla que es filtrar tu objeto en el mismo template agregando un template extra de esta manera:
<template>
<div>
<template v-for="(item, index) in items">
<li v-if="item.recomendada" :key="index">{{ item.nombre }}</li>
</template>
</div>
</template>
El error de vue se refiere a que no puedes filtrar directamente en la etiqueta que tiene el v-for. Pero si puedes filtrar en niveles interiores.
PD: En el codesandbox te he dejado las 2 opciones