Vuejs2 使用内嵌模板中的Vue在组件中添加新元素的正确方法

我有一个组件，它通过PHP在内联模板中列出了6个图像。当我单击“加载更多”按钮时，它会发出一个ajax调用，并接收更多要附加到图像列表中的帖子

我应该如何实现这一点？我只是用JS附加了一个模板字符串，但现在我需要在这个图像上添加一个事件侦听器，我不能只使用模板字符串

---

谢谢

我不知道我是否很清楚结果应该是什么，但据我所知，您有一个操作将从服务器端加载一些图像，您希望将它们附加到模板中；我将尝试起草一份解决方案，这是我想到的

• 首先，您需要一个数组作为视图模型中图像的持有者
• 按下“更多”按钮时，您必须更新此数组以添加新元素
• 您必须在阵列中循环并在模板中用v-for显示图像
• 当数组将被更改时，它通常也应该更新模板。（勾选）

模板

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

我希望我能很好地理解你，这个答案会有所帮助

---

更新：请检查一下新提琴。

给我们看看你试过什么。这几乎是我需要的。这看起来确实是正确的方法，我也找到了类似的解决方案，但正如我所说的，我有默认图像，在页面加载时通过PHP获取，这与您的示例中只有一个

v-for

，它将基于数组加载图像不同，我的图像应该先从PHP加载，然后再从这个数组加载，对吗？因为有两个模板看起来很奇怪，一个是PHP，另一个是使用

v-for

，你明白吗？你可以在创建的方法中获取数据并将它们推送到数组中，所以这将是你的默认图像。然后使用与我的示例中相同的方法。我会更新答案是的，我知道我能做到，但是我的图片将从JS加载，我希望它通过PHP与文档一起加载，这是整个问题的焦点。同时使用PHP和Vue图像模板看起来很奇怪，但除了使用Vue加载所有内容之外，我看不到其他方法（这也是我使用内联模板的原因）。

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);
 }
}