<p dir="auto">For example, the following code currently doesn't work.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;ticket&quot;&gt;
  &lt;select v-model=&quot;chosenTicket&quot; options=&quot;ticketOptions&quot;&gt;
    &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt; 
  &lt;/select&gt;
  &lt;button v-attr=&quot;disabled: !chosenTicket&quot; v-on=&quot;click: resetTicket&quot;&gt;Clear&lt;/button&gt;
  &lt;p v-if=&quot;chosenTicket&quot;&gt;You have choosen &lt;b&gt;{{chosenTicket.name}}&lt;/b&gt;(${{chosenTicket.price}})&lt;/p&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div id="ticket"&gt;
  &lt;select v-model="chosenTicket" options="ticketOptions"&gt;
    &lt;option value=""&gt;Choose...&lt;/option&gt; 
  &lt;/select&gt;
  &lt;button v-attr="disabled: !chosenTicket" v-on="click: resetTicket"&gt;Clear&lt;/button&gt;
  &lt;p v-if="chosenTicket"&gt;You have choosen &lt;b&gt;{{chosenTicket.name}}&lt;/b&gt;(${{chosenTicket.price}})&lt;/p&gt;
&lt;/div&gt;
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="new Vue({
  el: &quot;#ticket&quot;,
  data: {
    tickets: [
      { name: &quot;Economy&quot;, price: 199.95 },
      { name: &quot;Business&quot;, price: 449.22 },
      { name: &quot;First Class&quot;, price: 1199.99 }
    ],
    chosenTicket: null
  },
  computed: {
    ticketOptions: function() { 
      return this.tickets.map(function(ticket){
        return {text: ticket.name, value: ticket};
      });
    }
  },
  methods: {
    resetTicket: function() { 
      this.chosenTicket = null;
    }
  }
});"><pre class="notranslate"><code class="notranslate">new Vue({
  el: "#ticket",
  data: {
    tickets: [
      { name: "Economy", price: 199.95 },
      { name: "Business", price: 449.22 },
      { name: "First Class", price: 1199.99 }
    ],
    chosenTicket: null
  },
  computed: {
    ticketOptions: function() { 
      return this.tickets.map(function(ticket){
        return {text: ticket.name, value: ticket};
      });
    }
  },
  methods: {
    resetTicket: function() { 
      this.chosenTicket = null;
    }
  }
});
</code></pre></div>
<p dir="auto">knockout.js supports this and it is extremely useful for data binding of cascading dropdowns.<br>
Like <a href="http://knockoutjs.com/examples/cartEditor.html" rel="nofollow">http://knockoutjs.com/examples/cartEditor.html</a></p>
<p dir="auto">When using the <code class="notranslate">{text:'', value:''}</code> format for dynamic <code class="notranslate">&lt;select&gt;</code> options it becomes complex to get the <code class="notranslate">text</code> back out again for display since the <code class="notranslate">v-model</code> binds the <code class="notranslate">value</code>. One must then run a computed property and filter the <code class="notranslate">options</code> again and... you get the point.</p>
<p dir="auto">Would it be possible to to support a syntax like this?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="options: [
  {this: 'This One'},
  {that: 'That One'}
]"><pre class="notranslate"><code class="notranslate">options: [
  {this: 'This One'},
  {that: 'That One'}
]
</code></pre></div>
<p dir="auto">Which would then let us get that value back out like <code class="notranslate">this.options[this.selected]</code>. Just an idea. Feel free to say nay.</p>