Как динамически создать новый div с помощью v-for в Vue.js?

Я хочу создать div динамически на основе числа элементов, присутствующих в массиве. Div содержат html-элемент, созданный ProgressBar.JS.



Это 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>





Поскольку идентификатор связан только с одним div, я не могу выполнить новый ProgressBar.Объект Circle, который создаст еще один div. Существует ли способ динамического создания нового div с различным идентификатором a внутри v-для каждого нового ProgressBar.круг есть казнен? Может кто - нибудь помочь мне здесь?

1147   2  

2 ответов:

Одним из решений может быть присвоение уникальных идентификаторов каждому контейнеру div и создание индикаторов выполнения для каждого из них.

Попробуйте код ниже - 

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>

Update - val может быть массивом. И на его значения можно ссылаться из функции showProgressBar.

Я предполагаю, что длина массивов fitness и val одинакова.

Update 2 - Пояснение.

Так что в основном есть 2 главная здесь есть вопросы, которые надо решать.

1. Генерация нескольких container дивов

Нам нужно создать несколько container дивов, поскольку их будет несколько ProgressBars. Но нам нужно различать их, поэтому мы создаем уникальный идентификатор для каждого из них. Вот что делает следующий код.

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

Поскольку индексные номера уникальны. При добавлении их в "контейнер" генерируются уникальные идентификаторы. Смотрите Отображение Списка

2. Генерировать несколько ProgressBars когда компонент монтирует.

Это проще мы просто создаем новые ProgressBar для каждого значения "пригодности".

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

Refer - массив forEach

1  
2017-08-16 22:35:08

Вот многоразовый компонент, который обертывает 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>

Рабочий Пример .

3  
2017-08-16 22:31:05

Comments

    Ничего не найдено.
Click here to cancel reply.