title: How do I match a computed property to a bootstrap popover inside a nested v-for loop?
body: <p>Before typing this question up I have spent a number of days looking for an example that was close enough to help to no avail and so I'm bringing my specific use case to SO</p>
  <p>I am working on a layout with Bootstrap Vue where I'm loading in dates into into 12 buttons that correspond to months and then have a popover show above each button that includes the matching dates to that month which are loaded in from Firebase. So far I have almost the desired behavior in that I use a v-for to loop through a months array of objects that contains the month name and an array for holding matching dates for that month which lays out my buttons based on the month name and another v-for loop inside those buttons for the popover where I load in all the dates coming from Firebase.</p>
  <p>I also have a computed property where I shorten the incoming dates from Firebase to their shortened month names and then use nested for-in loops on both the months array and my dates array that takes in the Firebase dates to match the shortened months to the existing arrays inside my months array of objects. I will include photos of what I just said for clarity below</p>
  <p><a href="https://i.stack.imgur.com/K3Ul6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3Ul6.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/4M7dT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4M7dT.jpg" alt="enter image description here" /></a> &lt;-- <em>Each button contains a popover like this, I want to matched the months in the popover to the right month button and only that one</em></p>
  <p>Where I'm stuck at right now is how to go about connecting my computed property to the nested v-for loop of the popover so that only the matching dates show up for any month. Initially I tried moving the v-for to the button, but all that did was created multiple buttons for each incoming date <em>and</em> for each month name in the first v-for loop. Other example questions I've seen here for nested v-fors contain solutions when the data is coming from a single array it seems, but in my case, I have separate data in separate arrays that I would like to match i.e(Jan button should only have January dates, Feb button should only have February dates and so one and so forth). I will paste the relevant code blocks I have now below</p>
  <p>From the template:</p>
  <pre><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-row&gt;
          &lt;div v-for=&quot;(month,index) in months&quot; :key=&quot;index&quot;&gt;
              &lt;b-button 
                  :id=&quot;`date-popover-${month.name}`&quot;
                  class=&quot;shadeCircleColor&quot; 
                  :to=&quot;{ name: 'PaymentsDetailPage', params: { id: id } }&quot;
              &gt;
                  {{month.name}}
              &lt;/b-button&gt;
              &lt;b-popover
                  :target=&quot;`date-popover-${month.name}`&quot;
                  triggers=&quot;hover&quot;
                  placement=&quot;top&quot;
              &gt;
                &lt;div v-for=&quot;(payment, index) in payments&quot; :key=&quot;index&quot;&gt;
                  {{payment.createdOn}}
                &lt;/div&gt;
              &lt;/b-popover&gt;
          &lt;/div&gt;
          {{ matchedMonths }}
      &lt;/b-row&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  </code></pre>
  <p>From the data():</p>
  <pre><code>data() {
      return {
        dates: [], &lt;-- dates from firebase will show here in from a property  i.e(dates.createdOn)
        months: [ 
          {name: 'Jan', createdOn: [] }, 
          {name: 'Feb', createdOn: [] }, 
          {name: 'Mar', createdOn: [] }, 
          {name: 'Apr', createdOn: [] }, 
          {name: 'May', createdOn: [] }, 
          {name: 'Jun', createdOn: [] }, 
          {name: 'Jul', createdOn: [] }, 
          {name: 'Aug', createdOn: [] }, 
          {name: 'Sep', createdOn: [] }, 
          {name: 'Oct', createdOn: [] }, 
          {name: 'Nov', createdOn: [] }, 
          {name: 'Dec', createdOn: [] }, 
        ],
      };
    },
  </code></pre>
  <p>From the computed property:</p>
  <pre><code>computed: {
     matchedMonths() {
      for(let i in this.months) {
       for(let j in this.dates) {
        var dates = new Date(this.dates[j].createdOn)
        const shortMonth = dates.toLocaleString('default', { month: 'short' });
        if(shortMonth === this.months[i].name) {
          this.months[i].createdOn.push(shortMonth)
          console.log(this.months[i].name, this.months[i].createdOn)
        }
       }
      }
     }
    },
  </code></pre>
  <p>Where I'd say Im stuck at is how to return the matched months I want to the right v-for so the popovers only show one date for each of the months. One issue I suspected was with my nested for-in loops since when I try to return the shortened months to the months.createdOn array it makes all the buttons go away. What I've tried since then is changing the loop to use the .map function on the dates array and then somehow match that to the months array but I've run to undefined errors when I try to push those dates in.</p>
  <p>Here is the code illustrating that below:</p>
  <pre><code>const justDates = this.payments.map(payment =&gt; {
    return new Date(payment.createdOn).toLocaleString('default', { month: 'short'})
  })
  console.log(justDates)
  const months= this.months.map(month =&gt; {
    if(justDates === month.name){
      return month.createdOn.push(justDates)
    }
  })
  console.log(months)
  </code></pre>
  <p>I don't know where to put the matchedMonths computed property to get this to work properly or if I should just use a v-if in either v-for loop to check if the month.name === to the shortened month name of the incoming dates and would appreciate help on how to get the desired solution.</p>
  <p>What I also need help on is changing the shortened month dates back into their full month day and year string once I do get the right shortened months matched to their buttons. Is that code that also goes in the computed property? Thank you for your time.</p>