title: Binding an img srcset with an array and data object in Vue.js
body: <p>I have a list of image names in an array, but I want to prefix them with a host and add some fun sizing options for responsive.  Here is what I have: </p>
  
  <pre><code>new Vue({
    el: '#gallery_images',
    data: {
      desktop: 'w=400&amp;h=400&amp;fit=crop&amp;crop=faces,entropy&amp;auto=format,compress 400w,',
      ipad: 'w=600&amp;h=600&amp;fit=crop&amp;crop=faces,entropy&amp;auto=format,compress 600w,',
      mobile: 'w=900&amp;h=900&amp;fit=crop&amp;crop=faces,entropy&amp;auto=format,compress 900w,',
      responsive: 'w=1200&amp;h=1200&amp;fit=crop&amp;crop=faces,entropy&amp;auto=format,compress 1200w',
      host: 'https://tom.imgix.net/artsy/',
      images: [ '1.jpg?', '2.jpg?', '3.jpg?', '4.jpg?', '5.jpg?', '6.jpg?']
    }
  });
  </code></pre>
  
  <p>I am able to do some clumsy v-bind in the html and this works:</p>
  
  <pre><code>&lt;div id="gallery_images"&gt;  
  &lt;img v-for="image, in images" :src="'https://tom.imgix.net/artsy/' + image" v-bind:srcset="host + image + desktop + host + image + ipad + host + image + mobile + host + image + responsive" sizes="(min-width: 1240px) 33vw, 100vw"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>[Codepen]<a href="https://codepen.io/daletom/pen/WNvNgOa" rel="nofollow noreferrer">https://codepen.io/daletom/pen/WNvNgOa</a>
  This actually works!  But I think there is a better way. Instead of having to write all this host+image+size+host+image+size on and on.  It would be nice if I could just do a function for that and use it on all my pages in my website easily.  </p>
  
  <p>So I tried to build this.  I was thinking maybe add a computed function:</p>
  
  <pre><code>computed: {
      vueSDK: function () {
        return this.host + this.images + this.desktop + this.host + this.images + this.ipad + this.host + this.images + this.mobile + this.host + this.images + this.responsive
      }
    }
  </code></pre>
  
  <p>Then just pass the function in the srcset:</p>
  
  <pre><code>&lt;div id="gallery_images"&gt;  
  &lt;img v-for="image, in images" :src="host + image" v-bind:srcset="vueSDK" sizes="(min-width: 1240px) 33vw, 100vw"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that ain't working. It's just returning the same first image over and over.  You can see in this [codepen]<a href="https://codepen.io/daletom/pen/QWbJKPp" rel="nofollow noreferrer">https://codepen.io/daletom/pen/QWbJKPp</a></p>
  
  <p>Is there an eloquent way to pass a function in the srcset to dynamically load in all these images with the various responsive sizing? </p>