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检查新的小提琴。

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

1 个答案: