我有一个表单,用户可以使用select标签选择介于1和4之间的数字,其属性为v-model="screens"
。
根据所选的数字,v-for="screen in screens"
向用户显示选项介于1和3之间的新选择标签。例如,如果用户选择3,则显示3个选择标签。
然后,如果在第二个选择用户选择数字3,则用v-for
向用户显示三个输入。
问题在于我不知道如何更改输入的ID,因此我可以将用户信息保存到数据库中。
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>
&#13;
答案 0 :(得分: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:'',
}
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
好吧,在你准备好的方法中,你可以看到屏幕上的变化,如
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>