VueJs Убедитесь, что два выбора имеют разные варианты

Question

Я удалил много несвязанного кода, поэтому позвольте мне быстро объяснить процесс, с которым я сейчас пытаюсь иметь дело. Кто-то загружает файл CSV, этот файл может быть огромным. Чтобы избежать отправки чего-то такого большого на сервер, я хочу обработать это на клиенте, так как знаю, какие столбцы мне нужно сохранить.

Итак, когда CSV загружен, я быстро разбираю первую строку, чтобы получить имена столбцов. Затем я назначаю это fileHeaders

Как только это произойдет, появится следующее сообщение

<div v-if="fileHeaders !== ''">
    <div class="form-group">
        <label for="selectId">Select ID Column</label>
        <select class="form-control" id="selectId" v-model="selectedIdCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
    <div class="form-group">
        <label for="selectDate">Select Date Column</label>
        <select class="form-control" id="selectDate" v-model="selectedDateCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
</div>

Таким образом, это 2 выбранных варианта, каждый из которых отображает все fileHeaders. Все, что мне нужно, чтобы пользователь дал мне знать, какой заголовок представляет столбец идентификатора, а какой заголовок представляет столбец даты.

Внутри скрипта я сейчас привязываю выбранные входные данные к данным

<script>
    export default {
        data: function () {
            return {
                fileHeaders: '',
                selectedIdCol: '',
                selectedDateCol: ''
            }
        },
        methods: {

        }
    }
</script>

Теперь я хотел либо сделать одну из двух вещей, что бы ни имело больше смысла. Во-первых, если выбрана одна опция, то мне нужно убедиться, что эта опция не появляется во втором выборе. Однако мне может потребоваться скрыть второй выбор в этом случае, пока не будет выбран первый вариант?

Или я произвожу проверку в реальном времени, в результате чего не смогут выбрать один и тот же параметр дважды?

Что бы иметь больше смысла, и как бы я поступил так? Я видел такие вещи, как использование mount, но не уверен, что это хороший вариант?

Спасибо

Answer 1

Я бы рекомендовал использовать вычисленные свойства для заполнения обоих выбранных элементов:

<option v-for="fileHeader in idHeaders" :value="fileHeader">
    {{fileHeader}}
</option>

...

<option v-for="fileHeader in dateHeaders" :value="fileHeader">
    {{fileHeader}}
</option>

...

computed: {
    idHeaders() {
        return this.fileHeaders.filter(hdr => hdr !== this.selectedDateCol);
    },
    dateHeaders() {
        return this.fileHeaders.filter(hdr => hdr !== this.selectedIdCol);
    },

Answer 2

Попробуйте проверить выбранные столбцы перед отправкой данных на сервер и показать правильное предупреждение пользователю

new Vue({
  el: "#app",
  data: { 
    selectedIdCol: null,
    selectedDateCol: null,
    fileHeaders: ['id', 'column1', 'columnData', 'column3', 'column...']
    
  },
  methods: {
  
    send: function(event) {
    
      if(this.selectedIdCol == this.selectedDateCol) alert('Choose two different columns!')
    },
    
   
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-if="fileHeaders !== ''">
    <div class="form-group">
        <label for="selectId">Select ID Column</label>
        <select class="form-control" id="selectId" v-model="selectedIdCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
    <div class="form-group">
        <label for="selectDate">Select Date Column</label>
        <select class="form-control" id="selectDate" v-model="selectedDateCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
    <button @click="send">SEND</button>
</div>
</div>