Question

我想在按钮单击事件之后复制具有相同值的select元素。为该重复项动态添加模型以使所选数据保持其2向绑定的最佳方法是什么？另外，使用v模型时，第一个选项将不可见。

<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)>

复制选择元素并动态添加v模型

1 个答案: