javascript - 如何使用指定的键获取值？

Question

有一个使用 $.each 方法从 JSON 源创建的数组。控制台是这样说的:

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

(由于某种原因，jQuery 创建了一个观察者)

在 Vue.js 开发 View 中，它看起来像这样:

如何获取将 name 作为参数传递的 displayName 值？有没有 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
}

编辑

对于 future 的读者，sailNames 的填充方式存在一个小错误，导致上述方法无法工作。解决了这个问题后，一切都飞了起来。