Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setup method is not being called

I've created a starter project with vue ui (typescript, babel, linter). Everything works fine, but I can't quite understand how to make Composition API's setupmethod to work. It's simply not being called (log output is empty) Here's where I'm stuck.

  • vue: 3.0.0-rc.10

  • vue-cli: 4.5.4

    <script lang="ts">
     import { Options, Vue } from 'vue-class-component'
     import HelloWorld from './components/HelloWorld.vue'
    
     @Options({
       components: {
         HelloWorld
       },
       setup () {
         console.log('SETUP HERE')
       }
     })
     export default class App extends Vue {
       setup () {
         console.log('SETUP THERE')
       }
     }
     </script>
    
like image 540
manidos Avatar asked Sep 06 '20 12:09

manidos


People also ask

What is the set up method?

The setUp method is a hook provided by JUnit that executes prior to each and every test method you define. There is also a corresponding tearDown method that you might use for common test cleanup.

What is setUp method in JUnit?

First, JUnit 4 has a setup method that is invoked before each test method. This method is typically used for creating and configuring the system under test. This means that: We should create the dependencies of the tested object in this method.

What is when thenReturn in Mockito?

In Mockito, you can specify what to return when a method is called. That makes unit testing easier because you don't have to change existing classes. Mockito supports two ways to do it: when-thenReturn and doReturn-when . In most cases, when-thenReturn is used and has better readability.

Why Mockito is used?

The main purpose of using the Mockito framework is to simplify the development of a test by mocking external dependencies and use them in the test code. As a result, it provides a simpler test code that is easier to read, understand, and modify.


2 Answers

You should import setup from vue-class-component then use it like :

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

for more details please check this issue

like image 161
Boussadjra Brahim Avatar answered Oct 18 '22 18:10

Boussadjra Brahim


I had the same problem and it was caused by extending the child component. The composition API (setup method) is never called if you extend the component. While the options API lifecycle hooks are called in both components.

// child.js

<script>
import { onMounted } from "vue";

export default {
  name: "ChildComponent",
  setup() {
    console.log('Child - setup()');
    onMounted(() => {
      console.log('Child - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Child - mounted (option API)');
  }
}
</script>
// parent.js

<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";

export default {
  name: "ParentComponent",
  extends: ChildComponent,
  setup() {
    console.log('Parent - setup()');
    onMounted(() => {
      console.log('Parent - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Parent - mounted (option API)');
  }
}
</script>

OUTPUT

Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)
like image 33
MakoBuk Avatar answered Oct 18 '22 19:10

MakoBuk