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。我只需要用户让我知道什么标题代表ID列，什么标题代表Date列。

在脚本中，我当前将所选输入绑定到数据

<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

在将数据发送到服务器之前尝试检查选定的列，并向用户显示适当的警告

for each element1 in arr:
    for each element2 in arr:
        compare element1 and elements with overwritten __lt__ function

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!')
    },
    
   
  }
})

VueJ确保两个选择具有不同的选项

2 个答案: