Reference now inactive in an array object no longer exhibiting reactivity

After implementing the following code successfully, we noticed that changing the language updates the text correctly thanks to the ref:

const mainNavigationLinks = computed(() => [
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

return {
  mainNavigationLinks,
}

However, our ideal scenario would involve having mainNavigationLinks as a reactive object. This way, we could dynamically add or remove items from the array and have Vue components updated accordingly with the correct translations using the ref within the array. The Vue docs indicate that this should be achievable.

Upon trying the code below, we encountered an issue where the label is no longer reactive:

const mainNavigation = reactive([
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

const mainNavigationLinks = computed(() => mainNavigation)

We are puzzled about what might be missing here. How can we make sure that adding items to the array keeps it reactive? Your insights would be greatly appreciated. Thank you!

javascriptvue.jsvue-i18nvue-composition-api

Answer №1

It appears that you are looking to make the array reactive, while also having computed properties for the items within it.

const mainNavigation = reactive([
  { label: computed(() => context.root.$t('navigationMenu.home')) },
  { label: computed(() => context.root.$t('navigationMenu.tickets')) },
])

Another approach could be to avoid using computed altogether and have each label property as a function that needs to be called:

const mainNavigation = reactive([
  { label: () => context.root.$t('navigationMenu.home') },
  { label: () => context.root.$t('navigationMenu.tickets') },
])

The key concept here is that each label should be evaluated when used, which is why it must either be a computed property (for caching benefits) or a function. The issue with your current code is that you are fetching the label translations immediately upon constructing the array.

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

Display only the spans that contain text or are not empty

I need a solution to hide only those spans that are empty. <div class="img-wrapper"> <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This one has caption</span> </div> ...

javascriptjqueryhtmlcss

Make sure the variable is present in the store state by utilizing vuex

My application only loads to the DOM if user details are available: <template> <div id="app"> <template v-if="loggedUser"> //... </template> </div> </template> The loggedUser property is a computed valu ...

vue.jsvuex

JQuery appended Bootstrap Modal to Body, but it refuses to close

After going through the process of appending the modal to the body and getting the text box working, I encountered an issue when trying to close it on the AJAX success event - none of my attempted solutions seem to be effective. var id; var refundAmount ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

Identifying and recording duplicate values within an array using object transformation in JavaScript

I currently have an array structured like this: uniqueCount = [a,a,b,c,d,a,a]; I'm trying to figure out how many occurrences of each element (a, b, c) are in the array. I'd like to display the results in the form of an array of objects: [{key ...

javascriptarraysreactjsobject

Is there a way to logout when the select event occurs using the key?

I am trying to figure out how to log out the key value when the select event is triggered. Specifically, I want to access the key={localState.id} within the <select></select> element in my HTML. This key value is crucial for a conditional stat ...

javascriptreactjstypescript

Using JavaScript to utilize a variable containing a .match method with Regex Expression

Recently, I started delving into the world of regex with the aim of incorporating variables in my matches. Imagine I have a string that reads "Total: $168" My goal is to extract just the numerical value; 168. This is what I currently have: totalCost = t ...

javascriptregexvariables

The repairDatabase function cannot be found in the Collection.rawDatabase() method

Seeking guidance on repairing a database within Meteor. Currently executing the following code: Meteor.methods({ 'repairDB'(){ Users.rawDatabase().repairDatabase(); return true; } }); Encountering the following error: I20170630-18: ...

javascriptnode.jsmongodbmeteor

Setting up the Angular 2 router to function from the /src subfolder

My goal is to create two separate subfolders within my project: src and dist. Here are the key elements of my application: root folder: C:\Server\htdocs\ app folder: C:\Server\htdocs\src index.html contains <base href="/ ...

javascriptangularangular-ui-router

Troubleshooting the issue: "Error - 'Missing "data" payload in the request' when using Vue.js with Strapi"

When attempting to create a new entry in strapi by sending a post request in vue.js, I encountered the following error: message: Missing "data" payload in the request P.S: I also need to be able to upload files. I have read that using formData is ...

javascriptvue.jsvuejs3strapi

Tips for preventing route changes when clicking on a hash tag in AngularJS

I have a link in a small carousel on the page, and I am utilizing AngularJS routing to create a Single Page App. The tiny carousel uses anchor tags as buttons to navigate between images. <div class="carousel-controls-mini"> <a href=" ...

javascripthtmlangularjs

Dynamically inserting templates into directives

I've been attempting to dynamically add a template within my Angular directive. Following the guidance in this answer, I utilized the link function to compile the variable into an HTML element. However, despite my efforts, I haven't been success ...

javascriptangularjs

React dynamic dropdown selection based on previous dropdown values

I have implemented 3 react input fields that are populating data to a useState Hook <FormControl fullWidth> <InputLabel>Primary Goal</InputLabel> <Select ...

javascriptreactjsmaterial-ui

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

I am working towards achieving a layout similar to this: https://i.stack.imgur.com/M0rGl.jpg However, I currently have this setup: https://i.stack.imgur.com/VOGxJ.jpg The issue I am facing is that I am unable to position the first toolbar above the navi ...

htmlvue.jsvuetify.js

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Passing an HTML5 video element as a prop in Vue.js

I am attempting to pass an HTML5 video as a property from a parent component to a child component in Vuejs. Parent Component: <template> <div> <video ref="video"> <source src="@/assets/video.mp4" type= ...

javascriptvue.js

Images with spaces in their names are failing to load in React Native

I am currently trying to utilize an image within my react native application. At this point, my code is very minimal. The following code snippet is all I have for now: import React from 'react'; import { ScrollView, View, Text } from 'reac ...

javascriptreactjstypescriptreact-native

Using Vaadin: update Label text with TextField input after Button is clicked

I'm working on a simple Vaadin form where I want the text entered in a TextField to appear in a Label after the user clicks on a Button. Here's the code snippet: package com.example; import javax.servlet.annotation.WebServlet; import com.vaad ...

javajavascriptvaadinonclicklistener

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

javascriptjquerycsscarousel

Using ReactJS to incorporate events with an external DOM element

I am using ReactJS version 16.13.1 and I have the need to display an external DOM element along with its events. Let's consider having a <button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Sir ...

javascriptreactjsdom

Encountering the error message "Received 1 argument, when expecting 4" while attempting to utilize a vuex getter in TypeScript

I encountered an issue while unit testing a getter function. The error message Expected 4 arguments, but got 1. appeared when I attempted to use the getter. My application was built using Quasar and utilizes TypeScript. The value of HttpMocks.mockToken is ...

typescriptvue.jsjestjsvuexquasar