如何在Vue.js中使用v-for动态创建新的div？

Question

我想根据数组中存在的元素数量动态创建div。 div包含ProgressBar.js创建的html元素。

这是Vue.js代码

＆＃13;

＆＃13;

import ProgressBar from 'progressbar.js'
var bar;

export default {
    data() {
        return {
            fitness: ['Run', 'Cycle'],
            val: 0.65
        }
    },

    mounted(){
        this.showProgressBar(this.val);
    },


    created: function() {

    },

    methods:{
         showProgressBar: function(val){
            new ProgressBar.Circle('#container',{
                trailColor: 'gainsboro',
                trailWidth: 20,
                color: 'teal',
                strokeWidth: 20
            }).animate(val); 
         }
    }
}

＆＃13;

<div class="content" v-for="fitness in fitness">
  <span>{{ fitness }}</span>
  <div id="container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

由于id只与一个div关联，因此我无法执行会创建另一个div的新ProgressBar.Circle对象。有没有办法在每次执行新的ProgressBar.circle时动态创建一个在v内部具有不同id的新div？有人可以帮帮我吗？

Answer 1

这是一个包含progressbar.js的可重用组件。

<template>
  <div class="container"><div ref="bar"></div></div>
</template>
<script>
  import ProgressBar from "progressbar.js"

  export default {
    props:["options", "val"],
    mounted(){
      new ProgressBar.Circle(this.$refs.bar, this.options).animate(this.val)
    } 
  }
</script>
<style>
  .container{
    width:100px; 
    height: 100px
  }
</style>

以下是模板中的使用方法：

<div v-for="fit in fitness" class="fitness">
  <div>{{fit.name}}</div>
  <progress-bar :val="fit.val" :options="options"></progress-bar>
</div>

工作Example。

Answer 2

一个解决方案可以为每个容器div提供唯一ID，并为每个容器创建进度条。

尝试以下代码 -

＆＃13;

＆＃13;

import ProgressBar from 'progressbar.js'
var bar;

export default {
  data() {
    return {
      fitness: ['Dietary Intake', 'Exercise'],
      val: [0.65, 9]
    }
  },

  mounted() {
    this.showProgressBar();
  },


  created: function() {

  },

  methods: {
    showProgressBar: function() {
      this.fitness.forEach((f, i) => {
        new ProgressBar.Circle('#container-' + i, {
          trailColor: 'gainsboro',
          trailWidth: 20,
          color: 'teal',
          strokeWidth: 20
        }).animate(this.val[i]);
      });

    }
  }
}

＆＃13;

<div class="content" v-for="(f, index) in fitness">
  <span>{{ f }}</span>
  <div v-bind:id="`container-${index}`"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新 - val可以是一个数组。它的值可以从showProgressBar函数中引用。

我假设fitness和val数组的长度相同。

更新2 - 解释。

所以基本上这里有 2 主要问题需要解决。

1。生成多个container div

我们需要生成多个container div，因为会有多个ProgressBars。但是我们需要区分它们，因此我们为它们中的每一个创建一个唯一的id。这就是以下代码所做的。

<div class="content" v-for="(f, index) in fitness">
  <span>{{ f }}</span>
  <div v-bind:id="`container-${index}`"></div>
</div>

因为索引号是唯一的。将它们添加到＆＃34;容器＆＃34;生成独特的ID。见List Rendering

2。组件安装时生成多个ProgressBars。

这更简单，我们可以为每个＆＃34;健身＆＃34;创建新的ProgressBar。值。

this.fitness.forEach((f, i) => {
  new ProgressBar.Circle('#container-' + i, {
    trailColor: 'gainsboro',
    trailWidth: 20,
    color: 'teal',
    strokeWidth: 20
  }).animate(this.val[i]);

参考 - Array forEach