我如何 return 从 vue cli 方法更新变量值

Question

我编写代码使用 vue cli 方法增加和减少值，但这些方法不返回任何内容。但是默认值打印在 html 我怎样才能获得方法值。

----------
//html
<div class="col-sm-4">
                <div class="counter">
                <center>Adults</center>
                <div class="row"> 
                  <div class="col-sm-1">
                    <span class="fas fa-minus" v-on:click="adec"></span>
                  </div>
                  <div class="col-sm-10">
                    <center>{{adult}}</center>
                  </div>
                  <div class="col-sm-1">
                    <span class="fas fa-plus"  v-on:click="ainc"></span>
                  </div>
                </div>
              </div>
              </div>
----------
vue.js code 

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      adult:1,
    }
  },
  methods:{
    ainc(){
     this.adult++;
    },
    adec(){
     this.adult--;
    },
  }
}
</script>

Answer 1

我不确定这是否有帮助，但如果有帮助请告诉我：

<template>
  <div class="pt-5">
    <div class="row">
      <div class="col-sm-4">
        <button v-on:click="adec">minus</button> adult: {{adult}} | adec(): {{ainc()}}
      </div>
      <div class="col-sm-4">
        <button v-on:click="ainc">plus</button> adult: {{adult}} |  ainc(): {{adec()}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      adult: 1,
    };
  },
  methods: {
    ainc() {
      this.adult += 1;
      return this.adult;
    },
    adec() {
      this.adult -= 1;
      return this.adult;
    },
  },
};
</script>

我如何 return 从 vue cli 方法更新变量值

how can i return updated variable value from vue cli method

vue.js

vue-cli