计算道具不起作用 Vue JS 2 [英] Computed props not working Vue JS 2

问题描述

我在 YT 上的一个频道之后学习 vue js，该视频是去年发送的，所以我认为由于 VueJS 本身的一些变化，它无法正常工作，但如果你们能帮我解决这个问题，那就太好了

codeio 链接:http://codepen.io/myrgato/pen/BWWxdQ

HTML

<div id="应用程序"><button @click="increment">Increment</button><p>计数器:{{counter}}</p><p>点击次数:{{clicks}}</p>

JS

new Vue({el: '#app',数据: {计数器:0，点击:0},方法: {增量(){this.clicks++;}},计算:{柜台(){返回 this.clicks * 2;}}});

它应该计算点击量，然后使用计算属性来显示等于点击次数乘以二的计数器，但由于某种原因它不起作用..

解决方案

这是一个可行的解决方案.诀窍是:

• 为计算属性使用不同的名称(此处为 counter2)
• 并使用带有单个参数的 lambda 函数(此处为 x)而不是 this.

new Vue({el: '#app',数据: {计数器:0，点击:0},方法: {增量() {this.clicks++;}},计算:{计数器2:x =>x.clicks * 2}});

<script src="https://unpkg.com/vue@2.2.2"></script><div id="应用程序"><button @click="increment">Increment</button><p>计数器:{{counter2}}</p><p>点击次数:{{clicks}}</p>

im learning vue js following a channel on YT, the video was sent last year, so i think its not working due to some changes on VueJS itself, but it would be great if you guys could help me with this

codeio link: http://codepen.io/myrgato/pen/BWWxdQ

HTML

<script src="https://unpkg.com/vue@2.2.2"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

JS

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment(){
      this.clicks++;
    }
  },
  computed: {
    counter(){
      return this.clicks * 2; 
    }
  }
});

its supposed to calculate the amount of clicks, then use a computed proprerty to display a counter that equals clicks times two, but for some reason it isnt working..

解决方案

Here is a working solution. The trick is to:

• use a different name for the computed property (here counter2)
• and to use a lambda function with a single parameter (here x) instead of this.

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment() {
      this.clicks++;
    }
  },
  computed: {
    counter2: x => x.clicks * 2
  }
});

<script src="https://unpkg.com/vue@2.2.2"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter2}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

这篇关于计算道具不起作用 Vue JS 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！