带有逻辑的 Vue JS 选择答案

【问题标题】：Vue JS select with logic带有逻辑的 Vue JS 选择
【发布时间】：2020-10-03 17:11:09
【问题描述】：

我正在编写一个应用程序，它使用下拉菜单来映射 CSV 文件中的输入字段。我想实现这样的逻辑：“如果标题行读取'名字'或'名字'，然后选择此选项。”此代码失败，“属性内的插值已被删除。请改用 v-bind 或冒号简写。”

<option value="first name" selected="{{ (field == 'First Name' || field == 'Given Name') ? true : false }}">First name</option>

我不使用 :value="field" 或 v-model="field" 的原因有两个。首先，我有几个我想匹配的同义词，例如。 "Date of Birth, DOB, Birth date" 其次，许多标题行与任何字段都不匹配，在这种情况下，我想恢复为一个包罗万象的选项“未映射”

我试过了：

<option value="first name" :selected="true : field == 'First Name' || field == 'Given Name'">First Name</option>

但无论如何，这似乎总是选择选项。即使字段 == "出生日期"

有什么建议吗？

编辑：

到目前为止，我最好的解决方法是创建一个函数来计算选项值：

<select class="form-select" name="f{index}" :value="mapFieldName(field)">

mapFieldName: function (colName) {

    // Default return value
    var fieldName = "not mapped";

    // Convert to lowercase for case-insensitive matching
    colName = colName.toLowerCase();

    // Match first name field
    if (colName == "first name" || colName == "given name" || colName == "first" || colName == "fn")
        fieldName = "first name";

    // Return computed option value
    return fieldName;           
}

除非提出更优雅的解决方案，否则我会采用这个。

【问题讨论】：

好吧，现场模型没有正确获取您的value（名字）而不是名字。 <option> 包裹的文字不代表价值。

标签： javascript vue.js

【解决方案1】：

你可以使用 v-bind

<option value="first name" v-bind="getSelected('first name','given name')">First name</option>

然后在你的脚本中

methods:{
 getSelected(v1, v2){
  if(v1==this.field || v2==this.field){
   return {
    selected:true
   }
 }
}

【讨论】：

【解决方案2】：

这是将 v-bind 与方法一起使用的完美用例。

以前的答案（在某种程度上）沿着类似的路线发展，但我认为 v-bind 和方法都可以实现您正在寻找的东西。

这是一个简短的示例，但希望这能让您了解我所指的内容：

<template>
  <div>
    <select class="form-select" :value="selectedFieldName">
      <option v-for="(item, index) in csvCollection" :key="index" :selected="isOptionSelected" @click="selectedFieldName = item.fieldName">{{ item.fieldName }}</option>
    </select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedFieldName: '',
        csvCollection: []
      }
    },
    methods: {
      isOptionSelected(item) {
        if (item.fieldName.toLower() === "first name" || "given name") {
          return true;
        }
        item.fieldName = "Not Mapped";
        return false;
      }
    }
  }
</script>

【讨论】：