title: Vuejs disabled selected dropdown options?
body: <p>I have an array <code>selected</code> which holds a set of selected options. I'd like to use that array to add a <code>disabled</code> attribute on those options.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt; Vue-js Control &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="demo"&gt;
              &lt;select v-model="selected" multiple&gt;
                &lt;option v-for="option in options" v-bind:value="option.value"&gt;
                  {{ option.text }}
                &lt;/option&gt;
              &lt;/select&gt;
              &lt;span&gt;Selected: {{ selected }}&lt;/span&gt;
          &lt;/div&gt;
  
      &lt;script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      new Vue({
          el: '#demo',
          data: {
              selected: ['A','B','D'],
              options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' },
                { text: 'Four', value: 'D' },
                { text: 'Five', value: 'E' },
                { text: 'Six', value: 'F' },
                { text: 'Seven', value: 'G' },
              ]
          }
      });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>