using the information from the child array within a v-if condition

Question

using the information from the child array within a v-if condition

I'm struggling to extract data from a child array and utilize it in my v-if condition.

Below are my data and code. Any assistance would be appreciated, even if it's just pointers to the right documentation.

<div  class='post' v-for="message in messages"  v-if='["Food","Featured"].includes(tag) || tag === ""'>
            
            <h2>{{message.text}}</h2>

            <div v-for="category in message.categories">
              {{category.name}}
            </div> 

</div>

Rather than

v-if='["Food","Featured"]

, I've been attempting

v-if='[category in message.categories]

Clearly, that's not correct. How can I correctly pass data from a nested array UP to the v-if statement?

The data is provided below:

[
   {
      "text":"Featured food content",
      "categories":[
         {
            "name":"Featured",
            "ID": "189"
         },
         {
            "name":"Food",
            "ID": "190"
         }
      ]
   },
   {
      "text":"Featured content",
      "categories":[
         {
            "name":"Featured",
            "ID": "189"
         }
      ]
   }      
]

Thank you for all your help. This is what I came up with until I figure out how to use computed properties properly.

<template v-for="message in messages">
    <div class='post' v-if='message.categories.map(c => c.name).includes(tag) || tag === ""'>
        
        <h2>{{message.text}}</h2>

        <div v-for="category in message.categories">
          {{category.name}}
        </div> 

    </div>
</template>

javascript vue.js

Answer 1

Answer №1

Important Note: When using v-for and v-if in Vue.js, they should not be combined directly. To make use of v-if, you can convert it into computed properties as shown below:

The variable this.data represents the nested data that has been declared. The filter() method is used to define the test condition.

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

You can then proceed with displaying the desired content by iterating through the filtered values:

<div v-for="element in filteredData">{{element}}</div>

Answer 2

Important Note: When using v-for and v-if in Vue.js, they should not be combined directly. To make use of v-if, you can convert it into computed properties as shown below:

The variable this.data represents the nested data that has been declared. The filter() method is used to define the test condition.

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

You can then proceed with displaying the desired content by iterating through the filtered values:

<div v-for="element in filteredData">{{element}}</div>

Answer 3

Answer №2

If you're looking for a solution, here's one that might meet your needs. Feel free to reach out if you need further assistance. It seems there was some uncertainty about the issue based on the code provided.

<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;
      })
    }
  }
})

Alternatively, you can merge the v-for and v-if into a single computed property as suggested by @zerbene.

<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);
      })
    }
  },
})

Check out the Codepen link for a live demo: https://codepen.io/dyllandry-the-styleful/pen/vYKEjeb

Answer 4

If you're looking for a solution, here's one that might meet your needs. Feel free to reach out if you need further assistance. It seems there was some uncertainty about the issue based on the code provided.

<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;
      })
    }
  }
})

Alternatively, you can merge the v-for and v-if into a single computed property as suggested by @zerbene.

<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);
      })
    }
  },
})

Check out the Codepen link for a live demo: https://codepen.io/dyllandry-the-styleful/pen/vYKEjeb

Answer 5

Answer №3

(This solution doesn't address the potential conflict of using both v-for and v-if simultaneously, as discussed in detail here: )

To validate category names, you can leverage the .map(...) method on your array. This will generate a new array where you can then use .includes(tag). Insert this condition within your v-if:

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

Answer 6

(This solution doesn't address the potential conflict of using both v-for and v-if simultaneously, as discussed in detail here: )

To validate category names, you can leverage the .map(...) method on your array. This will generate a new array where you can then use .includes(tag). Insert this condition within your v-if:

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

using the information from the child array within a v-if condition

Answer №1

Answer №2

Answer №3

Similar questions

Why does the del command delete the parent folder as well?

Combining load and change events in jQuery at the same time

What is the best way to verify a password's strength with Joi so that it includes 2 numbers, 2 special characters, 2 uppercase letters, and 2 lowercase letters?

Ways to store debug logs in a file within my project

Formatting dates in JavaScript

How come this straightforward VueJS component template is appearing in the wrong location in the DOM, positioned above a table?

Calendar complete: ActiveRecord::RecordNotFound (Event with 'id' = update not found)

Embed the aspx file within the background-image attribute similar to how an image source is

Having trouble figuring out how to update a list using ajax in Yii

Storing cookies is not supported when using jQuery for authentication with Passport.JS

Issues with Line Chart in D3: Scaling and Zoom not functioning as expected due to ClipPath limitations

Passing data from an Express middleware to a Jade template

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

Angular.js encountered an error at line 13550: [ng:areq] The argument 'popCntrl' is expected to be a function, but it was undefined

Shadows persist despite light intensity being reduced to 0 during runtime

Using jQuery to trigger an event when an element is empty or when the element contains children nodes

Filtering for Material Autocomplete is limited to the getOptionLabel field

The "click" event is only effective for a single use

How to add vertical bars within ng-repeat in AngularJS

The following middleware is not functioning properly on a local SSL server