Vue.js 选项列表中如何仅选择一个变量？

2024-03-18 22:24:41

在包含两个变量的选项中仅选择一个值：Vue.js 选项列表的终极指南

在 Vue.js 项目中，我们经常需要在下拉列表或单选按钮组等选项列表中显示数据。这些列表通常包含多个变量，例如项目编号和名称。然而，有时我们只想获取一个变量，而不仅仅是整个字符串。本指南将探讨在 Vue.js 中仅选择一个变量的不同方法。

背景

假设我们有一个包含属性列表的数组，其中每个属性都具有编号和名称。我们希望使用 Vue.js 渲染一个下拉列表，允许用户从这些属性中选择一个。但是，我们只希望获取属性编号，而不是整个字符串。

解决方案

有几种方法可以仅选择一个变量：

方法 1：使用计算属性

使用计算属性可以从选项对象中提取特定的变量。

computed: {
  propertyNumbers() {
    return this.consumptionConfiguration.properties.map(property => property.propertyNumber);
  }
}

然后，我们在下拉列表中使用 propertyNumbers 数组作为选项值：

<b-form-select v-model="$v.consumptionConfiguration.departmentNumber">
  <option v-for="propertyNumber in propertyNumbers">
    {{ propertyNumber }}
  </option>
</b-form-select>

方法 2：使用模板字符串

另一种选择是使用模板字符串直接从选项对象中提取变量：

<b-form-select v-model="$v.consumptionConfiguration.departmentNumber">
  <option v-for="property in consumptionConfiguration.properties">
    {{ `${property.propertyNumber}` }}
  </option>
</b-form-select>

方法 3：使用事件监听器

最后，我们可以使用事件监听器来处理选项选择事件并提取所需的变量：

methods: {
  handleSelect(value) {
    // 从选项值中提取属性编号
    const propertyNumber = value.split(' ')[0];

    // 将属性编号分配给 v-model
    this.$v.consumptionConfiguration.departmentNumber = propertyNumber;
  }
}

然后，我们在下拉列表上添加 @input 事件监听器：

<b-form-select v-model="$v.consumptionConfiguration.departmentNumber" @input="handleSelect">
  <option v-for="property in consumptionConfiguration.properties">
    {{ property.propertyNumber + ' ' + '(' + property.name  + ')'}}
  </option>
</b-form-select>