选择后在模板内显示文本（带有文本字段和值字段）

Posted 2023-02-16

【中文标题】选择后在模板内显示文本（带有文本字段和值字段）

【英文标题】：show text inside of template after selection (with text-field and value-field)

【发布时间】：2021-12-27 07:07:36

【问题描述】：

我正在与BootstrapVue 合作。

我有一个b-form-select，我在其中显示我的name (= 文本字段) 在我的 child.vue 和emit 我的age (=value字段） 到我的 parent.vue。这很好用。

现在我也想show 我的name，所以我的child.vue template 中的文本字段 - 我怎样才能做到这一点？

现在我使用watch 来检测选择某项时的更改，emit 这个value.. 但在这里我还想检查我的text-field 并在我的b-form-select 下方“打印”它.

我的模板（child.vue）

<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select>
<div>  Here I want to see the name of my Person  </div>

我的脚本（child.vue）

data() 
  return 
    persons: [
      "name": "Hagrid", "age": "81",
      "name": "Harry", "age": "18",
      "name": "Ron", "age": "19",
      "name": "Snape", "age": "48"
    ],
    selected_Person: null,
  
,

watch: 
  selected_Person() 
    this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value

      

【参考方案1】：

方法一：交换text-field和value-field值

<b-form-select v-model="selected_Person" :options="persons" text-field="age" value-field="name"></b-form-select>
<div>  selected_Person  </div>

方法二：

你可以使用 computed 属性来做这个

<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select>
<div>  getPersonName  </div>

和

data() 
  return 
    persons: [
      "name": "Hagrid", "age": "81",
      "name": "Harry", "age": "18",
      "name": "Ron", "age": "19",
      "name": "Snape", "age": "48"
    ]
  
,
computed: 
 getPersonName() 
  return this.persons.filter(person => person.age == this.selected_person)[0].name; // logic is applicable only when you set value-field to `age`
 // In case if there are multiple persons with the same age then use the below code
 // return this.persons.filter(person => person.age == this.selected_Person).map(per => per.name).join(',');
 
,
watch: 
  selected_Person() 
    this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value

【讨论】：

文本字段仅适用于选择框，如果您想在外部 div 中显示它，请尝试使用计算。否则，不要在值字段中映射age，而是在值字段中映射name，在文本字段中映射age，因此您将能够在 div 上看到它

嗨，它在逻辑上有效，但实际上我之前无法声明我选择的解决方案.. 就像您使用 [0] 所做的那样.. 我如何检查“真实”选定的人？

我写的[0] 逻辑只有在你将value-field 设置为“年龄”时才有效。如果您将value-field 设置为“名称”，请按照方法1

return this.persons.filter(person => person.age == this.selected_person)[0].name; 这个代码行只给了我 json 的第一个数据，但我想根据我的选择显示它.. [0]，[1].. 不是我的解决方案需要..

不会的，尝试在选择框中选择年龄18，你就能看到对应的名字

【参考方案2】：

如何将 v-model 绑定到观察者？我认为观察者习惯于观察data() 属性中的特定值。您应该在 data() 中定义一个“selected_Person”属性并观察该值，因此您可以像这样在template 中显示：-

data() 
  return 
    persons: [
      "name": "Hagrid", "age": "81",
      "name": "Harry", "age": "18",
      "name": "Ron", "age": "19",
      "name": "Snape", "age": "48"
    ],
    selected_Person: null
  
,

watch: 
  selected_Person() 
    this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value

在模板中：-

<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select> 
<div>  selected_Person  </div>

【讨论】：

对不起，我当然在我的数据中定义了它 (selected_Person: null).. 我刚刚复制了我的代码，否则显示它会太大.. 在我的问题.. 但至少selected_Person 会显示我的年龄（=值）而不是我的名字（=文本字段）

检查我的答案

@patrick96 是的，因为上面的答案满足您的要求。您可以为此使用计算属性。