[Vuejs]-Difficults to connect a vue and js file to display

by

0👍

✅

with the help of @Chris G on the site of the count function and the @user3094755, I was able to find the solution to put all inside one file component on VUE.

I just added this part inside my vue file

<script>
export default {
  el: '#app',
  name: 'TravelOptions',
  data() {
    return {
      count: 0,
      count1: 0,
    }
  },
  methods: {
    increment() {
      this.count += 1
    },
    decrement() {
      this.count = Math.max(0, this.count - 1)
    },
    increment1() {
      this.count1 += 1
    },
    decrement1() {
      this.count1 = Math.max(0, this.count1 - 1)
    },
  },
}
</script>

0👍

Apart from this issue identified ( ie, the same counter is being used twice ) there’s no issue with your HTML / Javascript. It’s likley the build system you are using is not set up correctly.

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count += 1
    },
    decrement() {
      this.count -= 1
    },
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="pt-5 pl-20">
      <div>
        <h1 class="title text-white">How often do you fly per year?</h1>
        <div class="grid grid-cols-3 gap-4 mt-4">
          <button class="countbutton" @click="increment">&#8722;</button>
          <div class="text-white">{{ count }}</div>
          <button class="countbutton" @click="decrement">&#43;</button>
        </div>
      </div>
      <div class="pt-5">
        <h1 class="title text-white">How many flights over 6 hours?</h1>
        <div class="grid grid-cols-3 gap-4 mt-4">
          <button class="countbutton" @click="increment">&#8722;</button>
          <div class="text-white">{{ count }}</div>
          <button class="countbutton" @click="decrement">&#43;</button>
        </div>
      </div>
    </div>

Leave a comment