Is it possible to retrieve Vue app attributes within a Vue 3 method defined in the composition API?

Question

Is it possible to retrieve Vue app attributes within a Vue 3 method defined in the composition API?

I'm struggling to understand the extent to which Vue 3 composition API methods can access the attributes of a Vue app, including data.

Check out this jsfiddle, which is based on a fork of the Vue demo fiddle.

With a method defined in the options API, it's easy to retrieve values from data.

However, when using a method defined in the composition API, it seems like data and the app instance are out of reach. There's no this, as previously mentioned. It feels like the composition and options API parts are isolated from each other.

testopt, defined in the options API, has access to data and references returned by setup.

"Yo! from options API: Hello Vue!"
"this.msg2: Hello2"

testcompo, defined in the composition API, cannot see data, but can see references returned by setup.

"Yo! from composition API: this: undefined:"
"context: [object Object]: "
"context.data: undefined:"
"context.$data: undefined:"
"context.attrs: [object Object]: "
"context.attrs.data: undefined:"
"arg2: undefined:"
"msg2: Hello2"
"Yes, I know how setup and refs work. counter is now: 4"

javascript vue.js vuejs3

Answer 1

Answer №1

Learn how to utilize getCurrentInstance for accessing the options API:

const { createApp, ref, getCurrentInstance } = Vue
createApp({
  data() {
    return {
      message: 'Hello Vue!'
    },
  setup(props, context){
    const msg2 = ref("Hello2");    
    const vm = getCurrentInstance()
    function testcompo (evt, arg2) {
       console.clear();
       console.log("Hey there! from composition API: " + msg2.value);
       console.log("message: " + vm.data.message);
    };
    return { testcompo, msg2 }
  },
  methods : {
     testopt(evt){
       console.clear();
       console.log("Hey there! from options API: " + this.message)
       console.log("msg2: " + this.msg2);
     }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <div>{{ message }}</div>
  <button @click="testopt">
  Test option API here
  </button>
  <button @click="testcompo">
  Test composition API here
  </button>
</div>

Answer 2

Learn how to utilize getCurrentInstance for accessing the options API:

const { createApp, ref, getCurrentInstance } = Vue
createApp({
  data() {
    return {
      message: 'Hello Vue!'
    },
  setup(props, context){
    const msg2 = ref("Hello2");    
    const vm = getCurrentInstance()
    function testcompo (evt, arg2) {
       console.clear();
       console.log("Hey there! from composition API: " + msg2.value);
       console.log("message: " + vm.data.message);
    };
    return { testcompo, msg2 }
  },
  methods : {
     testopt(evt){
       console.clear();
       console.log("Hey there! from options API: " + this.message)
       console.log("msg2: " + this.msg2);
     }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <div>{{ message }}</div>
  <button @click="testopt">
  Test option API here
  </button>
  <button @click="testcompo">
  Test composition API here
  </button>
</div>

Is it possible to retrieve Vue app attributes within a Vue 3 method defined in the composition API?

Answer №1

Similar questions

Error encountered while integrating AngularJS date picker

Encountered a loading error while attempting to retrieve a JSON file from the GitHub repository

Vue.js behaving abnormally due to certain circumstances

The first three AJAX requests are successful, but the fourth one fails to reach the PHP script

What is the method for deactivating the voting button for a product review when the review's ID is present in local storage?

Top Tips for Managing Parameter Updates in Vue Router

I am having trouble combining my streams with es.merge

Invoking a .js file within an UpdatePanel from the CodeBehind

Is it possible to implement pagination using 'useSWR' in combination with the contentful-client?

Implement Placeholder feature in ng2-ckeditor with the combination of Typescript and Angular 2.0

Vue component utilizing named slots

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface

MongoDB: total value of combined fields

Exploring the functionalities of React with TypeScript using the useState hook

The JavaScript function is facing an issue where it is not replacing the text accurately as anticipated when

Ways to check if two strings share a common word using JavaScript

Ways to display scroll bar when hovering the mouse pointer?

What is the best way to transform this JSON data into an HTML table using JavaScript?

Navigate the orbit control camera in a circular motion around the target object

Creating a text with a curved shape using React