使用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

回答

相關問題