Question

我正在尝试使用所选值显示fullName函数

HTML：

<div id="test">
<h1>{{ sayHi }}</h1>

<select v-model="selected">
   <option v-for="person in persons" v-bind:value="person.about">
   {{ person.lname }}
   </option>
</select>
<p> {{ selected }} </p>

JS

New Vue({
  el: '#test',
  data: {
    selected : '',
    persons: [
      { fname: 'Foo' ,
        lname : 'Foo2',
        about : 'loren ipsum'},
      { fname: 'Bar' ,
        lname:'Bar2',
        about: 'dolor met'}
    ]  
  },
  computed :{
    sayHi : function() {
      return this.fname + " " + this.lname
    }
  }
})

h1应该根据选定的对象值返回，此代码返回未定义的（（如果我将选定的参数传递为arg，则根本不运行），尽管其他部分也起作用。我不确定如何获取计算函数来引用选定的对象吗？

编辑：在使用了很好的建议之后，为刚开始的其他人添加了一个Codepen：

https://codepen.io/2f2f/pen/rQdKKw

Answer 1

代码返回undefined，因为没有this.fname，也没有this.lname-它引用data对象，该对象只有selected和{{1} }。

您可以在循环中使用selected作为person的所有者，因此在您的方法中可以获取person的名字和姓氏，但是您需要修改绑定值。

尝试一下：

persons

new Vue({
  el: '#test',
  data: {
    selected : '',
    persons: [
      { fname: 'Foo' ,
        lname : 'Foo2',
        about : 'loren ipsum'},
      { fname: 'Bar' ,
        lname:'Bar2',
        about: 'dolor met'}
    ]  
  },
  computed :{
    sayHi : function() {
      return this.selected.fname + " " + this.selected.lname
    }
  }
});

Answer 2

fname和lname未在data中定义，因此this.fname和this.lname始终未定义；您需要首先根据selected值找到选定的人物对象，然后根据fname和lname计算全名。

new Vue({
  el: '#test',
  data: {
    selected : '',
    persons: [
      { fname: 'Foo' ,
        lname : 'Foo2',
        about : 'loren ipsum'},
      { fname: 'Bar' ,
        lname:'Bar2',
        about: 'dolor met'}
    ]  
  },
  computed: {
    sayHi: function() {
      var selectedP = this.persons.find(p => p.about === this.selected)
      return selectedP ? selectedP.fname + " " + selectedP.lname : ''
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="test">
  <h1>{{ sayHi }}</h1>

  <select v-model="selected">
     <option v-for="person in persons" v-bind:value="person.about">
     {{ person.lname }}
     </option>
  </select>
  <p> {{ selected }} </p>
</div>

VueJs参考所选对象

2 个答案: