如何在脚本中访问数组中的项目？

Posted 2023-02-22

【中文标题】如何在脚本中访问数组中的项目？

【英文标题】：how to access the item in an array in a script?

【发布时间】：2020-10-01 05:29:50

【问题描述】：

我是 vue 和 Laravel 框架的新手。

我想从 api 获取数据并动态显示这些数据。

我创建了一个名为“Progress”的表并植入了一些数据。我已经使用 API 资源来获取数据。

我已经创建了一个 vue 模板来从 api 中获取数据。

这是我的模板

<template>
<div class="container">
    <h1> Goals </h1>
    <p id="demo"></p>
       <div  class= "progress progress-bar-segmented"  v-for = "progressdata in progress" v-bind:id="progressdata.id">
             <div>  progressdata.name  </div>
             <div id="div1" class="progress-bar" style="width:20%"> progressdata.goal </div>
              <div id="div2" class="progress-bar value" style="width:20%"> progressdata.value </div>
        </div>
</div>

</template>

问题是如何从脚本中的进度数组访问单独的值，如 progressdata.goal 和 progressdata.value ？

如果我在方法中使用var a = this.progressdata.goal。我可以收到undefined value

我知道它们只能在该范围内访问。如何在脚本中单独访问它们？

这是我的脚本

<script>

  export default 
     data: function() 
            return 
              progress: [],

          
        ,

    mounted() 
       this.loadContents();
       this.start();
       setInterval(this.loadContents, 1000);


    ,
    methods: 

     loadContents: function() 
           //load Api
           axios.get('/api/progress')
           .then((response) => 
               this.progress = response.data.data;
         )
         .catch(function (error) 
           console.log(error);
    );
  ,

  start: function() 
        var  allProgressElements = document.getElementsByClassName('progress');
        Array.prototype.forEach.call(allProgressElements, function(el) 
        var targetDOM = $(el).getElementsByClassName('value');
        targetDOM.innerhtml = json.data[targetDOM.id].value;
       );
       


</script>

Anyone could help please?
thank you.

【问题讨论】：

可以完全去掉启动功能。在成功的 axios 调用中，progress 值被设置，并且由于 Vue 的反应性，v-for 将被激活。在 axios 响应中执行 console.log 以检查响应。响应是一个对象数组，如您所料吗？

感谢您的反馈。不，我需要单独获取进度数组中每个项目的值，例如目标和值..如何获取它们？以及如何在脚本的方法中传递它们？你能帮忙吗..

在您的脚本（方法、计算等）中，您可以访问progress 数组，并访问数组中的每个项目：a = this.progress[0].goal

是的，我在一个方法中尝试过a = this.progress[0].goal ..但我收到了 TypeError: Cannot read property 'goal' of undefined"。如何解决这个问题？你能帮忙吗？

【参考方案1】：

这里发生了几件事：

使用 Vue，几乎不需要使用函数直接访问 DOM。所以去掉start函数中的那些。 您对代码执行流程有误解，尤其是因为 axios Promise（见下面的代码） 请务必阅读有关 Vue reactivity、properties 和范围界定的所有内容。

<script>

  export default 
     data: function() 
            return 
              progress: [], // The progress array is defined
          
        ,

    mounted() 
       // Component mounted, start loading of contents
       this.loadContents();

       // Note i removed code here! Because that codes was
       // executed right after the loadContents call, but
       // before the axios result came in!  
    ,
    methods: 

     loadContents: function() 
           //load Api
           // The get function returns a promis
           axios.get('/api/progress')
           .then((response) => 
               // Promise resolved, now set the data:
               this.progress = response.data.data;
               // And now we can perform the start function
               this.start()
               // Maybe add the setInterval code here, although you need
               // to check if you really want to hit your server every second....
               // Better to use a websocket and let the server notify you about the progress
         )
         .catch(function (error) 
           console.log(error);
    );
  ,

  start: function() 
      // And in this function we now have access to the progress array:
      for (const item of this.progress) 
         console.log(item.goal) 
     
  

</script>

【讨论】：

感谢您的支持.. 是否可以在a=item.goal 之类的变量中声明 item.goal？如果我这样做，我没有得到结果。你能帮忙吗？

我需要创建一个以目标为目标、价值为服务器数据的圆形进度条。该值应该每秒更新为 2。我不知道该怎么做。你能帮帮我吗？谢谢。

看vuetifyjs.com/en/components/progress-circular/…而不是在你的v-for循环中，添加这个进度循环，并将它的percentage设置为:percentage="progessdata.value / progressdata.goal"（基本上不管你是否使用vuetify，只是计算 v-for 循环中的进度，我认为你真的不需要 start 函数）

感谢您的支持 :-) 我已经从给定的链接中放置了以下代码.. ```

你需要use vuetify in Vue。见vuetifyjs.com/en/getting-started/quick-start