Question

我正在将数据加载到多个选择框中，我将laravel与vuejs一起使用。通过vuejs将数据加载到选择框中，但我需要选择框中没有多个选择。

我的样品选择框

<tr>
    <td>1</td>
    <td>
        <select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
            <option value="">Select items</option>
            <option v-for="category in categories" :value="category.cat_id">@{{category.name}}</option>

        </select>
    </td>
    <td>
        <input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">


    </td>

</tr>
<tr>
    <td>1</td>
    <td>
        <select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
            <option value="">Select items</option>
            <option v-for="category in categories" :value="category.cat_id">@{{category.name}}</option>

        </select>
    </td>
    <td>
        <input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">


    </td>

</tr>

JS函数

$('#table1 tr').each(function() {
    $(this).find('#test[]').change(function(){
        // alert($(this).val());
        if($('option[value='+$(this).val()+']:selected').length>1){
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

Answer 1

您可以使用它。 <option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">

参考：Vuejs disabled selected dropdown options?

防止在下拉菜单中进行多项选择

1 个答案: