JSFiddle - React, Tailwind, and code Playground

by s1owjke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<b>Sandbox</b> Обработка удаленных опций во Vue внутри Form/Select

<div id="demo">
    options:<pre>{{options}}</pre>
    value:<pre>{{value}}</pre>
    <select v-model="value" @change="handleChange($event.target)">
        <option v-for="option in options" :value="option">{{JSON.stringify(option)}}</option>
    </select>    
    <a href="#" @click="addOption">Add</a>
    <a href="#" @click="removeOption">Remove</a>
    <a href="#" @click="resetValue">Reset value</a>
    <p>
        Одиночный селект не сбрасывается в undefined, тк код сравнивает значения модели (binding.value !== binding.oldValue && hasNoMatchingOption(binding.value, curOptions)) и вызывает событие change только в этом случае, в случае отсутствия опций оно тоже не вызывается
    </p>
</div>

JavaScript

let app = new Vue({
    el: '#demo',
    data: {
    	options: [1,2,3,4,5],
        value: 1
    },
    methods: {
    	addOption() {
        	this.options.splice(0, 0, Math.floor(Math.random() * Math.floor(1000)));
        },
        removeOption() {
        	this.options.splice(0, 1);
        },
        resetValue() {
        	var event = document.createEvent('HTMLEvents');
            event.initEvent("change", true, true);
            document.getElementsByTagName("select")[0].dispatchEvent(event);
        },
        handleChange(value) {
        	console.log({
                selectedIndex: value.selectedIndex,
                options: _.filter(value.options, {selected: true}),
                _vOptions: value._vOptions,
            });            
        }
    }
});