Q:

Can I send more than only value with v-model to v-for

I am new to Vue but I think that this can be really useful.
I have my first problem this simplified example

var appvue = new Vue({
  el: '#appvue',
  data: {
    selectedProd: []
  }
});
body {
  background: #20262E;
  
}
.form-row{
 width:24%;
 display:inline-block;
}
#appvue {
  background: #fff;
  padding:10px;
}
#prod_adjust{
  margin-top:20px;
  background: #eee
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div class="prod-wrap" id="appvue">
  <div class="form-row">
    <input v-model="selectedProd" name="product-1260" id="product-1260" type="checkbox" value="1260">
    <label for="product-1260">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 1</span>
        <span class="product-title">Product 1</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1261" id="product-1261" type="checkbox" value="1261">
    <label for="product-1261">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 2</span>
        <span class="product-title">Product 2</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1263" id="product-1263" type="checkbox" value="1263">
    <label for="product-1263">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 3</span>
        <span class="product-title">Product 3</span>
      </div>
    </label>
  </div>
  <div class="form-row">
    <input v-model="selectedProd" name="product-1264" id="product-1264" type="checkbox" value="1264">
    <label for="product-1264">
      <div class="thumb">
        <img src="https://picsum.photos/100/100">
      </div>
      <div class="details">
        <span class="brand">Brand 4</span>
        <span class="product-title">Product 4</span>
      </div>
    </label>
  </div>

  <div id="prod_adjust">
    <p v-for="product in selectedProd">{{product}}</p>
  </div>



</div>

I have a lot of products like the checkboxes above. I need to have the list of checked items in another place.
I did this with v-model and v-for - but my main problem is now that there are sending only the value from the checkboxes - I also need img-src, brand, product-title - all these parameters I also can have more attributes in an input.
But how I can pass them in data: { selectedProd:[]} with Vue?
Or I do I need to create a separate JS function which will collect all this data and send it to the array selectedProd?
Thank you in advance

A:

You would want to create an object with the data you need for the product. Then you can use v-for to loop through and display them the way you'd like.
In the example, I included a computed function that automatically returns the ones that get checked. This is done by v-model binding the checkbox to a flag inside your object. In this example, I called it selected, for simplicity. 

var appvue = new Vue({
  el: '#appvue',
  data: {
    products: [{
      id: 1260,
      brand: "Brand A",
      product: "Bubblegun",
      image: "https://picsum.photos/100/100",
      selected: false
    }, {
      id: 1261,
      brand: "Brand B",
      product: "Bubblegum",
      image: "https://picsum.photos/100/100",
      selected: false
    }],
  },
  computed: {
    selectedProd() {
      return this.products.map(product => {
        if (product.selected) return product
      })
    }
  }

})
body {
  background: #20262E;
}

.form-row {
  width: 24%;
  display: inline-block;
}

#appvue {
  background: #fff;
  padding: 10px;
}

#prod_adjust {
  margin-top: 20px;
  background: #eee
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div class="prod-wrap" id="appvue">
  <div class="form-row" v-for="product in products">
    <input v-model="product.selected" name="product-1260" id="product-1260" type="checkbox">
    <label for="product-1260">
    <div class="thumb">
    <img :src="product.image">
   </div>
      <div class="details">
    <span class="brand">{{product.brand}}</span>
    <span class="product-title">{{product.product}}</span>
   </div>
  </label>
  </div>

  <div id="prod_adjust">
    <p v-for="product in selectedProd">{{product}}</p>
  </div>
</div>

