复制一个select元素并动态添加v-model

Question

我想在按钮单击事件后复制具有相同值的选择元素。为该副本动态添加模型以使所选数据保持其双向绑定的最佳方法是什么？此外，使用 v-model 时会导致第一个选项不可见。

<section id="app">
selected jobs: {{preferredJobs.selectedJobs}}
<br><br>
<div class="form-row">
    <div class="col-12">
        <div class="form-group" v-for="(jobs, index) in preferredJobs.jobs">
            <label for="preferred_function" v-if="index == 0">
                Preferred job (multiple values possible)    <br><br>        
            </label>        

            <select v-model="preferredJobs.selectedJobs">
                <option value="">-- select --</option>
                <option v-for="jobFunction in allJobs" :value="jobFunction.value">{{jobFunction.label}}</option>
            </select>
            <br><br>
        </div>
    </div>
</div>
<div class="form-row">
    <div class="col-6">
        <button type="button" @click="preferredJobs.jobs.push({jobs: allJobs})" class="btn btn-plus"><i class="fas fa-plus-circle"></i> Add Job</button>
    </div>
    <div class="col-6" v-if="itemsLength(preferredJobs.jobs) > 1">
        <br>
        <button type="button" @click="preferredJobs.jobs.pop()" class="btn btn-minus"><i class="fas fa-minus-circle"></i> Remove Job</button>
    </div>                              
</div>      

<script>
new Vue({
    el: "#app",
    data() {
        return {        
            allJobs: [
                { value: 'job1', label: 'Job 1' },
                { value: 'job2', label: 'Job 2' },
                { value: 'job3', label: 'Job 3' },
                { value: 'job4', label: 'Job 4' },
                { value: 'job5', label: 'Job 5' },
            ],
            preferredJobs: {
                selectedJobs: [],
                jobs: [
                    {
                        jobs: this.allJobs
                    },                                          
                ],                  
            },
        }
    },
    methods: {
        itemsLength(items){
            return items.length;
        },      
    },      
})

Answer 1

你可以这样做

v-model="data[dynamic_index]"

或者你可以使用

<input :value="some_dynamic_variable" @input="$emit('input', $event.target.value)>