如何使用指定的鍵獲取值？

使用$.each方法創建了一個使用JSON源創建的數組。這是控制檯說什麼：如何使用指定的鍵獲取值？

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

（出於某種原因，jQuery的創建了一個觀察員）

在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>

來源

2017-06-27 AbreQueVoy

jQuery沒有創建觀察者，Vue將數據轉換爲觀察值。只需使用香草JavaScript。你想在哪裏使用它？在一個方法？模板？ – Bert

「sailNames」在數據中定義，然後由jQuery的$ .each方法更新。在數組填充後，我試圖在通過單擊DOM元素觸發的方法中使用它的值。 – AbreQueVoy

這會給你物體。

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導致上述方法行不通一個小bug。有了這個固定的，一切都飛了。

來源

2017-06-27 22:08:22 Bert

出於某種原因，「項目」一直未定義。 someMethod（）中的console.logs以正確的形狀顯示sailNames數組，正確讀取「name」參數，但最後仍未定義「item」變量。我選擇了第一個選項，在模板中沒有v-for。 – AbreQueVoy

@AbreQueVoy如果你分享你的代碼，我可以看看它。 – Bert

在問題的正文中增加了一些代碼，請看一看。 – AbreQueVoy

如何使用指定的鍵獲取值？

回答

相關問題