Vue.js에서 v-for를 사용하여 새 div를 동적으로 생성하는 방법

Vue.js에서 v-for를 사용하여 새 div를 동적으로 생성하는 방법

배열에 있는 요소의 수에 따라 동적으로 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는 1개의 div에만 관련되어 있기 때문에 새로운 ProgressBar를 실행할 수 없습니다.다른 div를 만드는 원 객체.새 ProgressBar.circle이 실행될 때마다 v- 내에 ID가 다른 새 div를 동적으로 생성할 수 있는 방법이 있습니까?누가 나 좀 도와줄래?

여기 랩된 재사용 가능한 컴포넌트가 있습니다.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>

작업 예

하나의 솔루션은 각 컨테이너 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. 복수 생성container드라이브

여러 개를 생성해야 합니다.container여러 개의 divs가 있기 때문에ProgressBars하지만 우리는 그것들을 구별해야 하기 때문에 각각의 아이디를 만듭니다.이것이 다음 코드가 하는 일입니다.

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

인덱스 번호는 고유하기 때문입니다.컨테이너에 추가하면 생성된 고유 ID가 생성됩니다.'리스트 렌더링' 참조

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

각 어레이를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/45720514/how-to-dynamically-create-a-new-div-using-v-for-in-vue-js