使用Vue.js更改元素的ID

我有一个表单，用户通过选择标记选择一个介于1和4之间的数字，其属性为v-model="screens"。使用Vue.js更改元素的ID

根据所选号码，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>

来源

2016-02-13 Adrián Rosales

你能告诉我们你的代码？ – nils

这是代码。 –

那么，在你准备好方法，你可以观看的屏幕更改，如

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>

来源

2016-02-13 13:08:33

确定。我已经弄清楚了。 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>

来源

2016-02-15 20:29:09

使用Vue.js更改元素的ID

回答

相关问题