[Vuejs]-Data from child array in v-if

by

1👍

✅

Here’s something that might do what you want, let me know. I couldn’t tell exactly what your problem was from your code.

<div id="app">
  <div
    v-for="message in messages"
    v-if="messageHasCategory(message, currentCategory)"
  >
    {{message.text}}
  </div>
</div>

const app = new Vue({
  el: "#app",
  data: {
    currentCategory: 'Food',
    messages: [{
      text: 'Food message',
      categories: [{
        name: "Food"
      }]
    }, {
      text: 'Featured message',
      categories: [{
        name: "Featured"
      }]
    }]
  },
  methods: {
    messageHasCategory(message, categoryName) {
      return message.categories.find(c => {
        return c.name == categoryName;
      })
    }
  }
})

Or you can combine the v-for and v-if into a single computed property like @zerbene suggests.

<div id="app">
  <div v-for="message in currentCategoryMessages">
    {{message.text}}
  </div>
</div>

const app = new Vue({
  el: "#app",
  data: {
    currentCategory: 'Food',
    messages: [{
      text: 'Food message',
      categories: [{
        name: "Food"
      }]
    }, {
      text: 'Featured message',
      categories: [{
        name: "Featured"
      }]
    }]
  },
  computed: {
    currentCategoryMessages() {
      return this.messages.filter(m => {
        return m.categories.map(c => c.name).includes(this.currentCategory);
      })
    }
  },
})

Codepen: https://codepen.io/dyllandry-the-styleful/pen/vYKEjeb

👤Dylan Landry

2👍

Warning: v-for and v-if not working together in Vue.js. For the v-if, you need to transform it as COMPUTED properties like

this.data is your nested data that you have declared.
In filter() you write your test.

computed: {
  testedValues: function () {
    return this.data.filter(i => i.categories !== '')
  }
}

and after you write what you want

<div v-for="item in testedValues">{{item}}</div>
👤zerbene

0👍

(This answer disregards the issue with using both v-for and v-if at the same time, which is discussed quite well here: https://stackoverflow.com/a/54531252/1406083)

If you want to check the category names, you can use .map(...) on your array, which will return a new array that you can then call .includes(tag) on. Put this in your v-if:

tag === "" || message.categories.map(c => c.name).includes(tag)
👤Billy Brown

Leave a comment