Leveraging external objects in Vue.js computed functions

Question

Leveraging external objects in Vue.js computed functions

Can Vue's computed property be used with an external object?

Let's consider the following code example to illustrate the idea:

<!-- Vue file -->

<template>
    <div>{{data.auth}}</div>
</template>

<script>
import {_data} form "./data"

export default {
    computed: {
        data() { return _data }
    }
}
</script>

<!-- data.js file -->

let _auth = "123";

export let _data = {
   auth: _auth
}

setTimeOut(() => _auth = "456", 2000)

Based on this code, one might expect the HTML document to switch from displaying "123" to "456" after 2000ms.

However, it seems that this functionality does not actually work as intended.

javascript vue.js

Answer 1

Answer №1

When using Vue 3, you have the ability to utilize the ref feature for tracking changes:

import { ref } from 'vue'

const _auth = ref('123')

export const _data = {
    auth: _auth
}

setTimeout(() => {
    _auth.value = '456'
}, 2000)

Here is a snippet that demonstrates this in action:

const _auth = Vue.ref('123')
const _data = {
  auth: _auth
}

setTimeout(() => {
  _auth.value = '456'
}, 2000)

Vue.createApp({
  data() {
    return {
      data: _data
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>{{ data.auth }}</div>
</div>

Answer 2

When using Vue 3, you have the ability to utilize the ref feature for tracking changes:

import { ref } from 'vue'

const _auth = ref('123')

export const _data = {
    auth: _auth
}

setTimeout(() => {
    _auth.value = '456'
}, 2000)

Here is a snippet that demonstrates this in action:

const _auth = Vue.ref('123')
const _data = {
  auth: _auth
}

setTimeout(() => {
  _auth.value = '456'
}, 2000)

Vue.createApp({
  data() {
    return {
      data: _data
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>{{ data.auth }}</div>
</div>

Answer 3

Answer №2

Using Observables allows you to create reactive data

import Vue from "vue";

let _auth = "123";
export let _data = Vue.observable({
  auth: _auth
});

setTimeout(() => {
  _data.auth = "456";
}, 2000);

Answer 4

Using Observables allows you to create reactive data

import Vue from "vue";

let _auth = "123";
export let _data = Vue.observable({
  auth: _auth
});

setTimeout(() => {
  _data.auth = "456";
}, 2000);

Leveraging external objects in Vue.js computed functions

Answer №1

Answer №2

Similar questions

Utilizing puppeteer-core with electron: A guide

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

Utilizing either Maps or Objects in Typescript

Passing a Variable Amount of Arguments to a Python Script from Node.js through the Command Line

JavaScript is throwing an error related to 'typeError' even after explicitly converting to a string

The process for retrieving an environment variable within a pipeline and transferring it to a release pipeline

The transformation of properties in Django templates and Vue.js using a CDN

A guide to showcasing JSON data on a webpage using JavaScript

Steps to create a Personal Access token on GitHub

Leveraging a factory value within another factory in AngularJS

Trigger an event in Javascript/ASP.net following a dropdownlist selection

Find your favorite artist on Spotify through the search function

Trigger animation once you've scrolled past a designated point in the document

Data merging in Firebase 9 and Vue 3 is not functioning properly

Creating vibrant squares using HTML and CSS

Securing a namespace using passport js: A step-by-step guide

Using Javascript outside of the AngularJS environment

Implementing a click event on header elements within a full calendar component in a React application

Guide to combining an Angular 2 application with a Django application

The content displayed on body.innerHTML does not match the information found in the page source code