如何从data()vue.js的两个不同的地方显示v-for

时间:2018-08-02 08:08:48

标签: javascript vue.js

<ul class="chart-box__info-chartlist">
   <li v-for="item in datachart.labels">
       <i class="chart-icon chart-icon_1"></i>
       <span>{{ item.label }} - {{ item.color }}</span> 
   </li>
</ul>  

data() {
            return {
                cb_info_sm: this.links[0].cb_info_sm,
                cb_info_sm_color: this.links[0].cb_info_sm_color,
                cb_info_label: this.links[0].cb_info_label,
                cb_info_url: this.links[0].cb_info_url,
                activeclass: 0,
                datachart: {
                    labels: this.links[0].data_lables.map( item => item.title),
                    datasets: [{
                        label: 'Chart',
                        backgroundColor: this.links[0].data_lables.map( item => item.color),
                        data: this.links[0].data_lables.map( item => item.value),
                        borderColor: '#ffffff'
                    }]
                }
            }
        },

数据在变化,我需要从datachart.datasets [0] .backgroundColor和datachart.labels显示两个值,也许有人知道,如何使用v-for做到这一点?

1 个答案:

答案 0 :(得分:0)

您的代码很脏,我建议您重组和清理您的数据图表对象,但是如果您坚持要保留该对象,则可以定义一个计算属性并对此进行v-for:

computed : {
  newDataChart () {
    return this.datachart.labels.map(item => {label: item, color: this.datachart.datasets[0].backgroundColor})
  }
}