i want do write a little application that uses the last digit of a number to output a pre defined answer. At the moment i can´t get the v-if comparison to be working. Maybe the variable last digit is defined the wrong way or i´m not accessing it right. One of the three options should be shown if "lastDigit" has an value (So the user had made an Input) and is smaller than 3, 7 or 10

Thank for your help

  <q-page padding>
<div>
<h1 >Glückscode eingeben</h1>
<input  v-model.number="code" />
<br>
<button  @click="check">Überprüfen</button>
</div>
<div><h3>{{ lastDigit }}</h3></div>
<div v-if="lastDigit !='' && lastDigit < 3">
<h2>{{ optionA }}</h2>
</div>
<div v-if="lastDigit != '' && lastDigit < 7">
<h2>{{ optionB }}</h2>
</div>
<div v-if="lastDigit != lastDigit''< 10">
<h2>{{ optionC }}</h2>
</div>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default{
  data() {
    return {
      code: '',
      lastDigit: '',
      optionA: '50% Rabatt',
      optionB: '75% Rabatt',
      optionC: '100% Rabatt',
      show: true
    }
  },
  methods: {
    check(lastDigit) {
      lastDigit = this.code % 10;
      console.log(lastDigit);
      return lastDigit
      }
    }
    }
</script>```

CodePudding user response：

Init your code, lastDigit with numeric values, then access the lastDigit using this not as passed parameter :

export default{
  data() {
    return {
      code: 0,
      lastDigit: 0,
      optionA: '50% Rabatt',
      optionB: '75% Rabatt',
      optionC: '100% Rabatt',
      show: true
    }
  },
  methods: {
    check() {
      this.lastDigit = this.code % 10;
      }
    }
 }