如何使用指定键获取值？

Question

使用$.each方法创建了一个使用JSON源创建的数组。这就是控制台所说的：

$vm0.sailNames;
[Array(24), __ob__: Observer]

（出于某种原因，jQuery创建了一个Observer）

在Vue.js开发视图中，它看起来像这样：

如何将displayName值传递name作为参数？有没有Vue.js数组的方法呢？

- 编辑：添加一些标记：

data() {
    return {
      (...)
      sailNames: [],
      (...)
    }
  },
  methods: {
    someMethod(name) {
      console.log("sailNames: ", this.sailNames);
      let item = this.sailNames.find(s => s.name == name);
      console.log("name (someMethod's arg.): ", name);
      console.log("item: ", item);

    },
    showName: function(e) { // this is the function triggered @click
      (...)
      const sourceElement = e.target.id;
      this.someMethod(sourceElement);
      (...)
    },
    (...)

DOM元素上的控制台输出点击：

sailNames:  [Array(24), __ob__: Observer]
name (someMethod's arg.):  grot
item:  undefined`

模板中的DOM元素：

<svg>
(...)
    <g id="sailShapes">
        <path class="rope" d="M 15,589 395,94" />
        <path id="latacz" d="M 160,404 255,391 390,104 z" class="sail" @click="showName" />
        <path class="rope" d="M 30,592 395,179" />
        <path id="grot" d="M 100,519 285,490 330,254 z" class="sail" @click="showName" />
    (...)
    </g>
(...)
</svg>

Answer 1

这将为您提供对象。

methods:{
  someMethod(name){
    let item=  this.sailNames.find(s => s.name == name)
    if (!item)
      //error

    // use item.displayName in code
  }
}

但是，通常如果您在模板中呈现sailNames，则可以将整个对象传递给您的方法。

<ul>
  <li v-for="item in sailNames" @click="someMethod(item)">{{item.name}}</li>
</ul>

，您的someMethod变为

someMethod(item){
  //use item.displayName
}

修改

对于未来的读者，sailNames的填充方式存在一个小错误，导致上述方法无效。有了这个，一切都飞了起来。