从计算属性中读取数据值答案

【问题标题】：read data value from computed property从计算属性中读取数据值
【发布时间】：2016-12-12 07:43:33
【问题描述】：

我正在尝试访问计算属性中“ts”的值，以便（最终）根据其值返回不同的类。但我就是无法得到“ts”的值。

     <div id="example">

        <div v-for=" alerte in alertes" v-bind:class=bgcoul>
         {{alerte.text}}   {{alerte.ts}}
        </div>

    </div>


    var vm = new Vue({
        el: '#example',
        data : {
          alertes:[ 
            {text: "qeq2", ts: '0'},
            {text: "qeq3", ts: '5'},
            {text: "qeq3", ts: '15'}
        ]
      },
         computed: {
            bgcoul: function () {
              console.log(this.ts);
              return { };
            }
         }
});

console.log(this.ts) 只给出“未定义”。

【问题讨论】：

标签： vue.js

【解决方案1】：

将ts值作为参数传递并使用方法，见下面代码sn-p

var vm = new Vue({
        el: '#example',
        data : {
          alertes:[ 
            {text: "qeq2", ts: '0'},
            {text: "qeq3", ts: '5'},
            {text: "qeq3", ts: '15'}
        ]
      },
         methods: {
            bgcoul: function (ts) {
              console.log(ts);
              return { };
            }
         }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
     <div id="example">

        <div v-for=" alerte in alertes" v-bind:class="bgcoul(alerte.ts)">
         {{alerte.text}}   {{alerte.ts}}
        </div>

    </div>

【讨论】：

【解决方案2】：

this.ts 不存在。 this.alertes 是一个对象数组，其中每个对象都有ts 属性。

computed: {
  bgcoul: function () {
    this.alertes.forEach(alert => console.log(alert.ts) )
    return { };
  }
}

【讨论】：