Изменение идентификатора элемента с помощью Vue.js

Question

У меня есть форма, где пользователь выбирает число от 1 до 4 с тегом выбора, со свойством v-model="screens",

В соответствии с выбранным номером, с v-for="screen in screens" пользователю показываются новые теги выбора с параметрами от 1 до 3. Например, если пользователь выбрал 3, то будут показаны 3 тега выбора.

Затем, если во втором выборе пользователь выберет номер 3, три входа будут показаны пользователю также с v-for,

Проблема в том, что я не знаю, как изменить идентификатор входных данных, чтобы я мог сохранить информацию о пользователе в базу данных.

Vue.component('select-square', {
    template:'#select-square',
    components:{
        'square-template' : {
            template: '#square-template'
        }
    }
});

new Vue({
    el: 'body',

    data: {
        screens:'',
    }
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<select class="form-control" v-model="screens" number>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<div v-for="screen in screens">
    <select-square></select-square>
</div>

<template id="select-square">
    <select class="form-control" v-model="squares" number>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <square-template v-for="square in squares"></square-template>
</template>

<template id="square-template">
    <input>
</template>

Answer 1

Хорошо. Я уже понял это. v-bind="{id: square}" сделать трюк

Vue.component('select-square', {
    template:'#select-square',

    data: function (){
        return {squares:''}
    },

    components:{
        'square-template' : {
            template: '#square-template'
        }
    }
});

new Vue({
    el: 'body',

    data: {
        screens:'',
    }
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>

<select class="form-control" v-model="screens" number>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<div v-for="screen in screens">
    <select-square></select-square>
</div>

<template id="select-square">
    <select class="form-control" v-model="squares" number>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <square-template v-bind="{id: square}" v-for="square in squares"></square-template>
</template>

<template id="square-template">
    <input>
</template>

Answer 2

Ну, в вашем готовом методе вы можете наблюдать за изменениями на экранах, как

data: function(){

  return {

    screens: 0,

    newSelectScreens: 0

  }

},

ready: function(){

    this.$watch('screens', function(){

    this.newSelectScreens = this.screens;

  });

}

Тогда для новых избранных экранов

<select v-for="n in newSelectScreens">
  <options></options>
</select>