指定されたキーを使用して値を取得する方法は？

Question

$.eachメソッドを使用してJSONソースから作成された配列があります。

はどのように取得することができます。

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

が、それはこのように見えるVue.js devのビューで

（何らかの理由で、jQueryのオブザーバーを作成）：これは、コンソールが言うことですdisplayName値はnameを引数として渡しますか？これを行うVue.js配列はありますか？

- 編集：いくつかのマークアップを追加：DOM要素のクリックで

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); 
     (...) 
    }, 
    (...) 

コンソール出力：テンプレート内

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が移入された方法で、小さなバグがあったなり。それで、全てが飛んでいった。