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

Question

<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做到这一点？

Answer 1

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

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