javascript - 迭代数据脚本中的键

标签 javascript vue.js vuejs2

我试图弄清楚如何将下拉菜单中的用户输入值与 ID 对象进行比较,其中键与 Vue 中的下拉菜单选项相匹配。

示例:

<template>  
  <select v-model="selectMenu">  
    <option v-for"select in selections">{{ selection }}</option>  
  </select>  
</template>  

<script>  
export default {  
  data() {
    return {  
      selectMenu: '', 
      selections: [ 'one', 'two', 'three' ],  
      ids: {
        one: 'dfs745jfdb',
        two: 'adfjdsh3gf5',
        three: 'ag23dsgnsj'
      }
    }
  }
}
</script> 

我想出了如何以更简单的方式做到这一点。我对 vue 和一般编码非常陌生。我所做的是将选择和 id 合并到一个数组中,如下所示: 解决方案:

<template>  
  <select v-model="selectMenu">  
    <option v-for"selectId in selectIds" v-bing:value="selectId.id">
    {{ selectId.text }}
    </option>  
  </select>  
</template>  

<script>  
export default {  
  data() {
    return {  
      selectMenu: '', 
      selectIds: [
        { text: 'one', id: 'dfs745jfdb' },
        { text: 'two' id: 'adfjdsh3gf5' },
        { text" 'three' id: 'ag23dsgnsj' }
      ]
    }
  }
}
</script>

最佳答案

this.ids[this.selectMenu] 应该为您提供 ids 对象中的对象。

关于javascript - 迭代数据脚本中的键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54993167/

相关文章:

javascript - 为什么Knockoutjs使用 "with"语句和 "new Function"来实现它的bindingProvider?

typescript 如何从一个参数的类型推断另一个参数的类型

vue.js - 如何在 Vue 中创建一个数字输入组件,其限制不允许超出限制范围

javascript - 过滤结果集时如何避免多个 if/else

javascript - 动态创建元素的 Angularjs 绑定(bind)问题

php - 弹出窗口不起作用

javascript - 教程中这个函数中的 if-else 语句有何意义?

javascript - jQuery:div 和 tbody 之间的查找行为不一致

javascript - 正则表达式如何检查消息不为空

javascript - Vue 组件不对插件数据更改使用react