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

Question

我正在与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
}
      

Answer 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
}

Answer 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>