如何将数组传递给模态？

Question

我正在使用 Axios 从 REST API 获取国家/地区列表，因此我设置了每个具有国家名称和标志的模式。

单击任何国家名称后，控制台将记录该国家/地区。

我有一个历史模式，我想通过点击它的最后 5 个国家。

<!-- History Modal -->
<div>
  <b-button v-b-modal.modal-1>View History</b-button>
  <b-modal id="modal-1" title="History">
    <p class="my-4">{{ country.name }}</p>
  </b-modal>
</div> 

这是控制台日志记录的脚本

handleClick(country) {
  console.log("Clicked on: " + country.name);
},

完整脚本在这里

Answer 1

您可以在handleClick()中创建一个循环缓冲区并传入被点击的国家/地区。 这将保留在历史记录数组中单击的最后 5 个国家，供您访问。

data(){
 return{
   index: 0,
   history: [],
 }
},
methods:{
  handleClick(data){
   console.log("Clicked on: " + data.name);
   this.history[this.index] = data;
   this.index = (this.index + 1) % 5;
  }
}