如何将VanillaJS数组传入Vue.js模型并在方法中访问

想让VanillaJS中定义的collected数组在Vue.js实例中访问，并在generateImages方法里使用该数据，但尝试通过window.collected传递数据失败，相关代码如下：

原JavaScript代码 #

function getData(){

const collected = [ {title:"title 1", img:"https://source.unsplash.com/random/1"},
     {title:"title 2", img:"https://source.unsplash.com/random/2"},
     {title:"title 3", img:"https://source.unsplash.com/random/3"},
     {title:"title 3", img:"https://source.unsplash.com/random/4"},
     {title:"title 3", img:"https://source.unsplash.com/random/5"},
     {title:"title 3", img:"https://source.unsplash.com/random/6"},
     {title:"title 3", img:"https://source.unsplash.com/random/7"},];



  console.log(collected);


  let data = collected;
  


      };

 
 $(document).ready(function() { 

   let app =  new Vue({
      el: "#app",
      data:{

        listi:[],
        list:window.collected 
      },
   mounted:function(){
    getData();
   this.collected=window.collected;


    
},
      methods: {
              
          toggle: function(todo){
            todo.done = !todo.done
        },
    
        generateImages(listi, index){

            var html = `<div class="row"><!-- begin row -->`;           
                html += `<div class="col-md-1">`;
                       
                        html += `<p>{list.src}</p>`;
                        html += `</div>`;   
                        html += `</div>`;

        return html;
       
      },
      }
    })

  })

原HTML代码 #

<html>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



    <div id="app"> 
    


    
 
      <div>
          <div v-html="generateImages()">
           


          </div>


  <div class="">
            <ul id="theList"></ul>
  </div>
    </div>

<script>

问题原因分析 #

1. 局部变量无法全局访问：getData函数内的collected是局部常量，仅在函数内部有效，没有挂载到window对象上，所以window.collected始终为undefined。
2. 初始化时机问题：Vue实例初始化时，getData还未执行，此时window.collected不存在，导致data里的list初始值无效。
3. 响应式属性未声明：Vue的响应式系统要求属性提前在data中声明，直接给this.collected赋值不会被Vue追踪，无法实现数据响应。
4. 方法逻辑错误：generateImages未遍历数组，且模板中错误使用{list.src}，实际数组项的图片属性是img。

修正方案 #

修正后的JavaScript代码 #

function getData(){
  // 直接返回数组，避免全局变量污染
  return [ 
    {title:"title 1", img:"https://source.unsplash.com/random/1"},
    {title:"title 2", img:"https://source.unsplash.com/random/2"},
    {title:"title 3", img:"https://source.unsplash.com/random/3"},
    {title:"title 4", img:"https://source.unsplash.com/random/4"},
    {title:"title 5", img:"https://source.unsplash.com/random/5"},
    {title:"title 6", img:"https://source.unsplash.com/random/6"},
    {title:"title 7", img:"https://source.unsplash.com/random/7"}
  ];
}

$(document).ready(function() { 
  let app = new Vue({
    el: "#app",
    data:{
      listi:[],
      collected: [] // 提前声明响应式属性
    },
    mounted:function(){
      // 调用getData获取数组并赋值给Vue实例的collected
      this.collected = getData();
    },
    methods: {
      toggle: function(todo){
        todo.done = !todo.done
      },
      generateImages(){
        let html = '';
        // 遍历collected数组生成每个元素的HTML结构
        this.collected.forEach(item => {
          html += `<div class="row"><!-- begin row -->`;           
          html += `<div class="col-md-1">`;
          html += `<p>${item.title}</p>`;
          html += `<img src="${item.img}" alt="${item.title}">`;
          html += `</div>`;   
          html += `</div>`;
        });
        return html;
      }
    }
  })
})

修正后的HTML代码 #

<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <div id="app"> 
    <div>
      <div v-html="generateImages()"></div>
      <div class="">
        <ul id="theList"></ul>
      </div>
    </div>
  </div>

  <!-- 引入修正后的JS脚本 -->
  <script src="你的脚本路径.js"></script>
</html>

内容的提问来源于stack exchange，提问作者Vzupo