CODEWITHSUNDEEP
cssvue.jsstyleswidth
some nooby questions
some nooby questions

Reputation: 693

How to set width from data to each element of v-for Vue.JS

I have my html code like this:

                <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat">
                    <div class="stats">
                        {% verbatim %}
                        <div>{{ s.proc1 }}</div>
                        <div class="statid">{{ s.name }}</div>
                        <div>{{ s.proc2 }}</div>
                        {% endverbatim %}
                    </div>
                    <div class="belt1">
                        <div class="belt2" :style="Style(k)"></div>
                    </div>
                </div>

in my Vue object in data I have:

statistics: [
            {name: 'Possession', proc1: 60, proc2: 40, id: 1},
            {name: 'Shoots', proc1: 65, proc2: 4, id: 2},
            {name: 'Passes', proc1: 64, proc2: 40, id: 3},
            {name: 'Fauls', proc1: 44, proc2: 4, id: 4}
        ],

in methods I have:

Style: function(k){
            switch(k)
            {
                case 1:
                    return { width: statistics[0].proc1 }
                case 2:
                    return { width: statistics[1].proc1 }
                case 3:
                    return { width: statistics[2].proc1 }
                case 4:
                    return { width: statistics[3].proc1 }
            }
        }

But the code is not correctly. How can I set the percentage of width from data to my each belt by method Style?

Upvotes: 0

Views: 904

Answers (2)

Amaarockz
Amaarockz

Reputation: 4674

I suggest to use computed in this case..

new Vue({
  el: '#app',
  data: {
    statistics: [
        { name: 'Possession', proc1: 60, proc2: 40, id: 1 },
        { name: 'Shoots', proc1: 65, proc2: 4, id: 2 },
        { name: 'Passes', proc1: 64, proc2: 40, id: 3 },
        { name: 'Fauls', proc1: 44, proc2: 4, id: 4 }
    ],
  },
  computed: {
    styling() {
      return i => { return { width: `${this.statistics[i].proc1}px` };}
    }
  }
})

and

 <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat">
                    <div class="stats">
                        {% verbatim %}
                        <div>{{ s.proc1 }}</div>
                        <div class="statid">{{ s.name }}</div>
                        <div>{{ s.proc2 }}</div>
                        {% endverbatim %}
                    </div>
                    <div class="belt1">
                        <div class="belt2" :style="styling(k)"></div>
                    </div>
                </div>

Upvotes: 0

Aslam H
Aslam H

Reputation: 1801

You forgot px { width: statistics[0].proc1 } -> { width: `${statistics[0].proc1}px` }

new Vue({
  el: '#app',
  data: {
    statistics: [
        { name: 'Possession', proc1: 60, proc2: 40, id: 1 },
        { name: 'Shoots', proc1: 65, proc2: 4, id: 2 },
        { name: 'Passes', proc1: 64, proc2: 40, id: 3 },
        { name: 'Fauls', proc1: 44, proc2: 4, id: 4 }
    ],
  },
  methods: {
    style(i) {
      return { width: `${this.statistics[i].proc1}px` }
    }
  }
})
span { display: block; background: #f5f5f5; padding: .5rem; border: 1px solid }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <span
    v-for="(statistic, i) in statistics"
    :key="i" 
    :style="style(i)"
  >
    {{ statistic.name }} width: {{ statistic.proc1 }}px
  </span>
</div>

Upvotes: 1

Related Questions