title: Nested v-for Loop in Vue Selecting Wrong Checkbox
body: <p>I have a nested loop in a vue component. The first loop is to create four dropdown boxes, the second loop is to create three options within each dropdown box. I have attached the image to illustrate. They work correctly in that if I select the checkbox for any of the options within any dropdown box then the correct outcome occurs. The problem is that if I click the word next to the checkbox then always the corresponding option in the first dropdown box is selected, which is not acceptable. So, if I click the checkbox next to 3b then everything is fine; if I click the 'b' next to the checkbox (which is likely for a user to do), then 1b will be selected.</p>
  <p>How can I make clicking the 'b' in this case select 3b instead of 1b?</p>
  <p>template code</p>
  <pre><code>&lt;b-list-group v-for=&quot;number in  numbers&quot; v-bind=&quot;number&quot;&gt;
      &lt;b-button v-b-toggle=number class=&quot;m-1 flood-button&quot;&gt;{{ number }} &lt;/b-button&gt;
      &lt;b-collapse :id=&quot;number&quot;&gt;
          &lt;b-card&gt;
              &lt;b-list-group&gt;
                  &lt;b-list-group-item v-for=&quot;letter in letters&quot; v-bind=&quot;letter&quot; class=&quot;list-group-item&quot;&gt;
                      &lt;label :for=letter&gt;
                          &lt;input :id=&quot;letter&quot; type=&quot;checkbox&quot; @change=&quot;toggleLayerVisibility({
                              'floodType': ft,
                              'risk': $event.target.id,
                              'display': $event.target.checked
                          })&quot;&gt;
                          {{ letter }}
                      &lt;/label&gt;
                  &lt;/b-list-group-item&gt;
              &lt;/b-list-group&gt;
          &lt;/b-card&gt;
      &lt;/b-collapse&gt;
  &lt;/b-list-group&gt;
  </code></pre>
  <p>component data</p>
  <pre><code> data () {
          return {
              letters: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;],
              numbers: [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;]
          }
  }
  </code></pre>
  <p>screenshot</p>
  <p><a href="https://i.stack.imgur.com/zNt1S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zNt1S.png" alt="enter image description here" /></a></p>