Vue.js-在列表中定位嵌套属性以将其用作变量

问题描述

我正在使用Vue.js，并且我有一些项目列表，我需要从这些项目中定位要用作变量的属性，不幸的是，我似乎无法弄清楚应该如何定位该变量。

下面的代码有望给出我正在尝试做的事情（以及我要去哪里的错误）。

<table>
<tr>
<th>Student 1 Name</th>
<th>Student 2 Name</th>
<th>Student 3 Name</th>
</tr><tr>
<td id="a0">{{studentdata.0.name}}</td>
<td id="a1">{{studentdata.1.name}}</td>
<td id="a2">{{studentdata.2.name}}</td>
</tr>

在这种情况下，我期望将呈现“值1a”和“值1b”。不是。如果我将函数替换为以下内容：

var items = [
    {
        doh: `value 1a`,ray: `value 2a`,me: `value 3a`,fah: `value 4a`,soh: `value 5a`
    },{
        doh: `value 1b`,ray: `value 2b`,me: `value 3b`,fah: `value 4b`,soh: `value 5b`
    }
];

new Vue({
    el:`#feefoReviews`,data: {
       name: items
    },computed: {
        test: function() {
            var $result = this.items.doh;
            return $result
        }
    }
)};

我在页面上呈现了示例，因此很明显我错误地定位了该属性。我确定我确实缺少一些明显的东西。

解决方法

您似乎正试图以对象键为目标，但是对象位于数组内，因此无法获得键的匹配项。您需要为要使用的对象添加数组的索引。

test: function() {
    return this.name[0]['doh'];
}

,

尝试使用map函数仅返回该属性：

 test: function() {
           return this.name.map(item=>{
              return item.doh;
           })
        }

返回一个数组：

[`value 1a`,`value 1b`]

var items = [{
    doh: `value 1a`,ray: `value 2a`,me: `value 3a`,fah: `value 4a`,soh: `value 5a`
  },{
    doh: `value 1b`,ray: `value 2b`,me: `value 3b`,fah: `value 4b`,soh: `value 5b`
  }
];

let app=new Vue({
    el: `#feefoReviews`,data: {
      name: items
    },computed: {
      test: function() {
        return this.name.map(item => {
          return item.doh;
        })
      }
    }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="feefoReviews">
  <ul>
    <li v-for="item in test" :key="item">{{item}}</li>
  </ul>

</div>