在內聯模板中用Vue在組件中添加新元素的正確方法

Question

我有一個組件，它通過內聯模板中的PHP列出了6個圖像。當我點擊一個'加載更多'按鈕時，它會進行一次ajax調用，並接收更多要添加到圖像列表中的帖子。

我該如何實現？我只是用JS附加了一個模板字符串，但現在我需要在這個圖像上添加一個事件監聽器，我不能只使用模板字符串。

謝謝！

Answer 1

我不知道我是否理解好結果應該是什麼，但從我的理解你有一個動作，它將從服務器端加載一些圖像，並且你想把它們附加到你的模板;我會嘗試起草一個解決方案，我想到的是什麼。

• 首先你需要一個數組作爲持有人在您的視圖模型的圖像。
• 你將不得不更新這個數組，當你按下更多的按鈕時添加新的元素。
• 你必須循環訪問數組，在模板中使用v-for顯示圖像。
• 當數組將被更改時，它通常應更新模板。 （檢查documentation for this）

模板

<template> 
    <div v-for"image in allImages"> 
    ... display your images here... 
    </div> 
</template> 

腳本

data: { 
    allImages: [] 
}, 
created() { 
    // this will do the php call and update your array before the component is shown. So, it will your default. 
    getMoreImages(); 
}, 
methods: { 
// Assuming this is a server call which receive a response with images... 
getMoreImages(response) { 
    var newImages = response.newImages; 
    this.allImages.push(newImages); 
} 
} 

我希望我理解你很好，這個答案會有所幫助。

更新：在這裏你有一個JS Fiddle example of what I mean請檢查新的小提琴。