使用 Vue.js 更改元素的 ID答案

【问题标题】：Changing an element's ID with Vue.js使用 Vue.js 更改元素的 ID
【发布时间】：2016-05-24 07:20:19
【问题描述】：

我有一个表单，用户使用选择标签选择 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>

【问题讨论】：

你能告诉我们你的代码吗？

标签： laravel vue.js

【解决方案1】：

嗯，在你准备好的方法中，你可以观察屏幕的变化，比如

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>

【讨论】：

【解决方案2】：

好的。我已经想通了。 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>

【讨论】：