带有逻辑的 Vue JS 选择

Posted 2023-02-23

【中文标题】带有逻辑的 Vue JS 选择

【英文标题】：Vue JS select with logic

【发布时间】：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="findex" :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> 包裹的文字不代表价值。

【参考方案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>