使用Vue.js更改元素的ID [英] Changing an element's ID with Vue.js

问题描述

我有一个表单，其中用户使用select标签选择一个介于1和4之间的数字，其属性为 v-model ="screens" .

I have a form where the user select a number between 1 and 4 with a select tag, with the property of v-model="screens".

根据选择的数字，使用 v-for =屏幕中的屏幕" 向用户显示选项在1到3之间的新选择标签.例如，如果用户选择3，则显示3个选择标签.

According to the number selected, with v-for="screen in screens" new select tags with options between 1 and 3 are showed to the user. For example if the user select 3, then 3 select tags are showed.

然后，如果在第二个选择用户中选择数字3，则还会使用 v-for 向用户显示三个输入.

Then if in the second select the user select the number 3, three inputs are showed to the user also with v-for.

问题是我不知道如何更改输入的ID，因此我可以将用户信息保存到数据库中.

The problem is that I don't know how to change the id of the inputs so I can save the user info to the database.

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>

推荐答案

好.我已经知道了. v-bind ="{id:square}" 绝招

Ok. I already figure it out. v-bind="{id: square}" make the trick

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>

这篇关于使用Vue.js更改元素的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！