Saya ingin membuat div secara dinamis berdasarkan jumlah elemen yang ada dalam array. Div berisi elemen html yang dibuat oleh ProgressBar.js.

Ini kode 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>

Karena id diasosiasikan dengan hanya satu div, saya tidak dapat mengeksekusi objek ProgressBar.Circle baru yang akan membuat div lain. Apakah ada cara untuk membuat div baru secara dinamis dengan id berbeda di dalam v-untuk setiap kali ProgressBar.circle baru dijalankan? Dapatkah seseorang tolong bantu saya di sini?

5
CoderPJ 16 Agustus 2017, 21:20

2 jawaban

Jawaban Terbaik

Salah satu solusi dapat memberikan id unik untuk setiap div wadah dan membuat bilah kemajuan untuk masing-masingnya.

Coba kode di bawah ini -

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>

Pembaruan - val dapat berupa larik. Dan nilainya dapat direferensikan dari dalam fungsi showProgressBar.

Saya mengasumsikan panjang array fitness dan val adalah sama.

Pembaruan 2 - Penjelasan.

Jadi pada dasarnya ada 2 masalah utama di sini yang harus ditangani.

1. Menghasilkan beberapa container div

Kita perlu membuat beberapa container div karena akan ada banyak ProgressBars. Tetapi kita perlu membedakannya sehingga kita membuat id unik untuk masing-masingnya. Itulah yang dilakukan kode berikut.

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

Karena nomor indeks unik. Menambahkannya ke "wadah" menghasilkan id unik. Lihat Rendering Daftar

2. Hasilkan beberapa ProgressBars saat komponen dipasang.

Ini lebih sederhana, kami membuat ProgressBar baru untuk setiap nilai "fitness".

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

Lihat - Array forEach

3
Community 20 Juni 2020, 09:12

Berikut adalah komponen yang dapat digunakan kembali yang membungkus 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>

Berikut adalah bagaimana ini digunakan dalam template:

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

Bekerja Contoh.

5
Bert 16 Agustus 2017, 19:31