title: Vue.js v-model with dynamic list of radio buttons
body: <p>I am trying to make a reuseable vue radio-button component that will take a variable name, and an object containing labels and values, then render a list of radio buttons using v-for.  </p>
  
  <p>I have had success with each half of the problem, but have not managed to combine them:</p>
  
  <ol>
  <li>I can make a set of radio buttons bound to the data model, where the buttons are defined statically in the template, but I don't know how to make the list dynamic.  Here is the code for that:</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//component
  const Radio = {
   template: '#test',
    prop: ['value'],
    data () {
      return {
        selected: this.value
      }
    },
    model: {
     prop: 'value',
        event: 'change'
    },
    methods: {
      handleClickInput (e) {
        this.$emit('change', this.selected)
      }
    }
  }
  
  //app
  var app2 = new Vue({
    el: '#app2',
    data: {  
      door: '',
     doorOptions: {
      'Yes': 1,
      'No': 0,
     }
   },
    components: { Radio, }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app2"&gt;
    &lt;radio v-model="door"&gt;&lt;/radio&gt;
    &lt;p&gt;
      door = {{door}}
    &lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;template id="test"&gt;
    &lt;div&gt;
      &lt;input type="radio" value="0" v-model="selected" @change="handleClickInput"&gt;0
      &lt;input type="radio" value="1" v-model="selected" @change="handleClickInput"&gt;1
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>I can make a dynamic list of radio buttons based on an "options" object, but can't find a way to bind them to the data model.  Here is the code for that:</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// component
  Vue.component('radio-set', {
    template: '#radio-set',
    props: {
     'label-name': '',
     'variable': '',
     'options': '',
    },
    methods: {
      clicked: function(variable, key, value) {
      // none of this is right, it doesn't update the vue data model
    window[variable] = value; //assign the new value to the dynamic variable name
    selected = value;
    this.$emit("click-event", variable) //create the click event for model updating by the parent
      }
    },
  })
  
  //app
  var app = new Vue({
    el: '#vueApp',
    data: {
      door:'initial value',
    doorOptions: {
      'Yes':1,
      'No':0,
        'Maybe':5,
        'A new option':25
    },
    
    },
    methods: {
    buttonClick: function(p1){
     console.log(p1+': '+window[p1]); //the variable was assigned inside the child component
    }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="vueApp"&gt;
   &lt;radio-set 
    label-name="Radio button set" 
    variable="door" 
    :options="doorOptions"
    @click-event="buttonClick" 
   &gt;door: {{door}}
   &lt;/radio-set&gt;
  &lt;/div&gt;
  
  &lt;template id="radio-set"&gt;
   &lt;div&gt;
    &lt;label&gt;{{labelName}}:&lt;/label&gt;
    &lt;button 
        type="button" 
        v-for="(val, key) in options"
        @click="clicked(variable, key, val)" 
        &gt;
        {{ key }}
    &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could anyone help with a couple of pointers on how I could move forwards?</p>