My vue is not defined although I've defined it

Question

I'm learning Vue and I'm doing a simple calculator app, but I cannot seem to get it to work without errors. I currently just print the numbers and the operator to test but I get the "Vue is not defined error" in the console every time. I have other "apps" currently on the same page, e.g. rolling a dice which generates no errors; when I remove the calculator tab the console errors disappear.

I have also tried removing the Vue definition from the data()-function as well as some other things. The console log also complains that my variables number1, number2, and operations is not defined in the instance but referenced during render. Currently you can choose a numbers and the operator and the program will print them anyway.

<template>
    <div id="calc">
        <h2>Calculator</h2>
        <input v-model.number="number1" placeholder="Write a number">
        <select v-model="operations" id="ope">
            <option disabled value="">Select one</option>
            <option id='plus'>+</option>
            <option id='minus'>-</option>
            <option id='multiply'>*</option>
            <option id='divide'>/</option>
        </select>
        <input v-model.number="number2" placeholder="Write a number">
        <p>{{ number1 }} {{ operations }} {{ number2 }}</p>
    </div>
</template>

<style>
    input {
        text-align: center;
        width: 100px;
        margin: 7px;
    }
</style>

<script>
  export default {
    data() {
        var vm = new Vue({
            el: '#ope',
            data:{
                operations: '',
                number1: '',
                number2: '',
            },
            methods:{
                plus(){

                },
                minus(){

                },
                multiply(){

                },
                divide(){

                },
            }
        })
    }
}
</script>

My main mounts the App.vue file which consists of

<template>
  <div id="app">
    <header><p>Yup this is a header</p></header>
    <div id="nav">
      <router-link to="/">Start</router-link>
      <router-link to="/dice">Dice</router-link>
      <router-link to="/faq">FAQ</router-link>
      <router-link to="/calculator">Calculator</router-link>
    </div>
    <div id="content">
      <router-view/>
    </div>
    <footer>
      <p>Yes this is a footer</p>
    </footer>
  </div>
</template>

The part where a new Vue instance is declared inside the data prop looks scary to me! Please avoid doing that! — roshnet
– roshnet, Commented Sep 25, 2020 at 16:24

roshnet · Accepted Answer · 2020-09-25 16:38:00Z

Here's a good approach to what you're trying to do using a computed property. You don't need to define a lot of methods -

<template>
  <div>
    <h2>Calculator</h2>
    <input type="number" v-model="number1" placeholder="Write a number">
    <select v-model="operation">
      <option disabled value="">Select one</option>
      <option id='plus'>+</option>
      <option id='minus'>-</option>
      <option id='multiply'>*</option>
      <option id='divide'>/</option>
    </select>
    <input type="number" v-model="number2" placeholder="Write a number">
    <p>{{ number1 }} {{ operation }} {{ number2 }} = {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      operation: ''
    }
  },
  computed: {
    result() {
      if (this.operation == '+')
        return this.number1 + this.number2

      if (this.operation == '-')
        return this.number1 - this.number2

      if (this.operation == '*')
        return this.number1 * this.number2

      if (this.operation == '/')
        return this.number1 / this.number2
      
      return 0  // we always need to return something in a computed property
    }
  }
}
</script>

It's tested, and works as expected.

Ah thank you! I was thinking that the vue definition inside the data was kinda sketchy, but I couldn't get it to compile without it for some reason; thank you very much!

David Dias · Accepted Answer · 2020-09-25 16:31:27Z

<template>
    <div id="calc">
        <h2>Calculator</h2>
        <input v-model.number="number1" placeholder="Write a number">
        <select v-model="operations" id="ope">
            <option disabled value="">Select one</option>
            <option id='plus'>+</option>
            <option id='minus'>-</option>
            <option id='multiply'>*</option>
            <option id='divide'>/</option>
        </select>
        <input v-model.number="number2" placeholder="Write a number">
        <p>{{ number1 }} {{ operations }} {{ number2 }}</p>
    </div>
</template>

<style>
    input {
        text-align: center;
        width: 100px;
        margin: 7px;
    }
</style>
<script>
  export default {
  data: () => ({
    operations: "",
    number1: '',
    number2: '',
  }),
  methods:{
    plus(){},
    minus(){},
    multiply(){},
    divide(){},
  }

}
</script>

Collectives™ on Stack Overflow

My vue is not defined although I've defined it

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related