Learn the best practices for integrating the options API with the Composition API in Vue3

Using vue3 and vite2

Below is a simple code snippet.
The expected behavior is that when the button is clicked, the reactive 'msg' variable should change.
It works as expected in development using Vite, but after building for production (Vite build) and deploying, it seems to stop working. The click method cannot access the reactive 'msg' variable.
According to the VueJS documentation, the options API can work alongside the composition API.

<template>
  <h1>{{ msg }}</h1>
  <button @click="click">Click</button>
</template>

<script setup>
  const msg = ref('hello')      
</script>

<script>
  import { ref } from 'vue'
  export default {   
    methods: {
      click() {
        this.msg = 'ok'     
      },
    },
  }
</script>

Answer №1

If you want to utilize both options and composition api, you can achieve this by returning values and methods from the setup function:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const msg = ref('hello')
    const changeMsg = () => {
      return 'again'
    }
    return { msg, changeMsg }
  },
  data() {
    return {
      otherMsg: this.changeMsg()
    }
  },
  methods: {
    click() {
      this.msg = 'ok'     
    },
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js></script>
<div id="demo">
  <h1>{{ msg }}</h1>
  <h1>{{ otherMsg }}</h1>
  <button @click="click">Click</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to deliver client/index.html using server/app.js?

Here is my current file structure: - simulated-selves - client - index.html - server - app.js The goal is to serve the user index.html when they visit the / route. // server/app.js app.get('/', function(req, res) { res.sendFile( ...

Changing the hover color of an Angular Material MD Button

<div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == ' ...

Troubleshooting Rails 4: Handling a 404 Not Found Error When Making an AJAX Call to a

After spending about an hour trying to figure this out, I am still stuck... The action in my oferts_controller.rb file looks like this: def update_categories @categories = Category.children_of(Category.find(params[:categories])) respond_to ...

Leveraging the Meteor Framework for Application Monitoring

Exploring the potential of utilizing Meteor Framework in a Monitoring Application. Scenario: A Java Application operating within a cluster produces data, which is then visualized by a Web Application (charts, etc.) Currently, this process involves using ...

Extracting data from a nested JSON array within an AngularJS template

Here is some JSON data: { "tracks": [ { "album": { "released": "2013", "href": "spotify:album:3qGeRY1wt4rrLIt1YuSwHR", "name": "The Marshall Mathers LP2 (Deluxe)", "availability": { ...

Leveraging Handlebars Object within JavaScript

Is there a way to pass an entire object into javascript directly? I've tried using the {{{data}}} and {{data}} methods as suggested in other posts, but it doesn't seem to be working for me. Here's what I have in my handlebars file: <scri ...

Is it possible to retrieve calculated data from a child component and pass it to the parent component?

Is there a way to transfer computed data from a child component to a parent component? Currently, I am passing data from the parent to the child first and then I would like to utilize the computed property (data) in the parent component. This is crucial as ...

Can csrf protection effectively secure data being posted to a server via axios?

In my current project, I am utilizing Laravel but it is not a Vue Single Page Application (SPA) so no routes are being used. Instead, the registration, login, and other form interactions are done through modals using Vue. Axios is being used to send form ...

Animating the dimensions of objects in THREEjs

In my project using THREE.js, I am aiming to create a captivating animation where an object gradually shrinks into nothingness. After exploring solutions on Three.js - Animate object size, I found methods to adjust the size of an object. However, the chan ...

Using AngularJS for AJAX operations with dynamic PHP variables

I have an AngularJS code that is looping through an AJAX JSON response like this: <div ng-repeat="post in posts"> {{post.title}} {{post.url}} </div> It's working fine. How can I pass a PHP variable based on the JSON? Let's assume t ...

When attempting to display a sub view in Express, a 404 error is encountered

I am currently working with express and jade to display a web page. My intention is to render the page using this format 'http://127.0.0.1:5000/services/landfreight' but I keep encountering a 404 error. router.get('/service/landfreight' ...

Using NextJs to create a permanent redirect from the www version of a site to the non

I have developed a website using Nextjs (version 12.1.4). To enhance the SEO of my site, I want to create a permanent redirect from the www version to the non-www version. Typically, this can be achieved easily using nginx or an .htaccess file with apache. ...

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

Leverage Jquery within the div element to manipulate the data retrieved from a post ajax request

On my one.jsp page, I have the following post code: $.post("<%=request.getContextPath()%>/two.jsp", { vaedre: fullDate} ,function(result){ $("#theresult").append(result); }); This code generates the followi ...

Loss of data in the local storage when the page is reloaded

click here to see image I have managed to save data to local Storage successfully, but it keeps disappearing when I reload the page. Can someone guide me on how to handle this issue? I am new to this and would greatly appreciate any help. Thank you. https ...

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

Doc - const array = [ { user: new ObjectId("627913922ae9a8cb7a368326"), name: 'Name1', balance: 0, _id: new ObjectId("627913a92ae9a8cb7a36832e") }, { user: new ObjectId("6278b20657cadb3b9a62a50e"), name: 'Name ...

A guide to filtering a JSON array by email address with JavaScript

How can I identify distinct elements in a JSON array using JavaScript? Below is the example of my JSON array. I need to determine the size of unique elements. [ { "_id": "5aaa4f8cd0ccf521304dc6bd", "email": "<a h ...

Sort through the array using a separate array in Vuejs

I am currently working with two arrays: { "products": [ { "name": "Jivi", "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche", "frequency": ["1", "2", "8"] }, { "name": "Adynovi", ...

Is there a different option than jQuery.ajaxSettings.traditional for use with XMLHttpRequest?

Is there a different option similar to jQuery.ajaxSettings.traditional for xmlhttprequest? or What is the method to serialize query parameters for an xmlhttprequest? ...