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

Question

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

这是Vue.js代码

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); 
         }
    }
}

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

由于一个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>

工作实例。

Answer 2

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

尝试下面的代码 -

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]);
      });

    }
  }
}

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

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

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

更新 2 - 解释。

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

1.生成多个containerdiv

我们需要生成多个containerdiv，因为会有多个ProgressBars. 但我们需要区分它们，因此我们为每个人创建一个唯一的 id。这就是下面的代码的作用。

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

由于索引号是唯一的。将它们添加到“容器”会生成唯一的 ID。参见列表渲染

ProgressBars2.组件挂载时生成多个。

这更简单，我们简单地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