Changes to a Vue shallowRef's value do not automatically trigger an update

I created a simple program to test out shallowRef and encountered an unexpected behavior.

The instructions mention that the first method of updating should work, but only the second one seems to update the value properly. Why is that?

Below is my code snippet:

<script setup>
import { shallowRef } from 'vue';

let value = 0;
const shallowState = shallowRef({count: value});
</script>

To demonstrate the issue, here is the template section with two buttons:

<template>
  <button @click="shallowState.value = {count: ++value}">shallowRef {{ shallowState.count }}</button>
  <br /><br />
  <button @click="shallowState = {count: ++value}">shallowRef {{ shallowState.count }}</button>
</template>

Answer №1

Using .value in template code is incorrect because the ref has already been unwrapped, thus resulting in shallowState.value being undefined. Essentially, you end up trying to assign shallowState.value.value.

This becomes more apparent with the second button example. When declaring shallowState = ..., where shallowState is a const and therefore not reassignable. However, it seems to work because instead of reassigning shallowState, what's actually happening is the reassignment of shallowState.value.

This automatic unwrapping feature is provided for convenience. If this doesn't suit your preferences, you can replace the inline handler with a function defined in your script which necessitates using .value when modifying ref values.

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 a sublist when a list item is clicked

I am receiving a JSON object in my view that looks like this: $scope.mockData = [ { "folder": "folder1", "reports": [{ "name": "report1" }, { "name": "report2" }, { "name": "report3" }] }, { "folder": "folder2", "reports": [{ "name": ...

Vertical positioning offset of jQuery UI selectmenu in relation to buttons on this line

When creating a form, I like to place control elements in a line such as a button, select box, and checkbox for a logical layout. However, after incorporating jQuery UI, I noticed a strange vertical alignment issue with the select box. For reference, here ...

The Strong Password checker fails to identify the presence of a forward slash

Here is a regex I have for validating a strong password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d!$\/%@]{6,20}$/ Criteria: Alphanumeric with special characters $/%@ At least 1 number At least 1 lowercase letter At least ...

Form a collection of X amount of words using a string in JavaScript

Hello amazing Stack community, I am currently striving to create a straightforward JavaScript function that can accurately count the total number of words from a given string value. Furthermore, I aim to store a specific number, X, of words into an array ...

Running intricate javascript/jquery/json code using an html checkbox

Hey there, I'm hoping this issue is simpler than I'm making it out to be... So, I've got this pretty complex JSON/jQuery function (3000 lines long) that builds a DOM tree in a separate JS file. This JS file also contains a bunch of other on ...

Displaying a JavaScript variable on a webpage using ExpressJS

Trying to render the variable cat, which is a string within an ExpressJS statement and a script tag. This is the code: <script> function detectChange() { var place; cat = document.getElementById("catT ...

Checking and merging arrays in Javascript

I have a unique challenge involving two arrays of objects that I need to merge while excluding any duplicates. Specifically, if an object with the key apple: 222 already exists in the first array, it should be excluded from the second array. Please see be ...

Instant data entry upon clicking

In an attempt to automate input based on image pairs, I encountered a challenge. On one side, there are two images that need to be matched with input fields, and on the other side, there are corresponding letters for each image to fill in the inputs upon c ...

Include additional text following the element that contains the specified string

I am interested in developing a Google Chrome extension that can identify code snippets on web pages and automatically copy them to the clipboard. With limited experience in JavaScript and jQuery, I aim to start with a simple test case. For instance, I w ...

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

Is it possible to reset the selectbox after removing options using Javascript/jQuery?

When I run the command below in a loop: $("#day option:last").remove(); If this command is executed multiple times, some options are missing from my selectbox. Therefore, I am looking for a way to reset the selectbox back to its original state at the be ...

Creating a triangle number pattern in JavaScript with a loop

Hi there, I'm currently facing an issue. I am trying to generate a triangular number pattern like the one shown below: Output: 1223334444333221 =22333444433322= ===3334444333=== ======4444====== I attempted to write a program for this, however, ...

How can I connect all private methods to the class instance (referred to as 'this') in JavaScript?

I've been using this handy function to bind all public methods to 'this' (found it here) https://gist.github.com/anhldbk/782e13de7f79b07e556a029a9ce49fa3 static BindMethods() { Object.getOwnPropertyNames(Object.getPrototypeOf(this)) ...

When generating a fresh event and attempting to link the event ID to its creator, unexpected obstacles emerged

I am currently working on an application that revolves around events. One of the key features requires users to be logged in to create events, and upon creation, I need to update the user's events array with the event ID. However, I have encountered a ...

Updating state based on input from a different component

I am attempting to modify the state of the page index in index.js from the Pagination component, Here is my index.js code: import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const ini ...

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

In my code, there is a nested ng-repeat set up. The 'boards' variable in the scope is an array that contains another array called 'tasks', which also consists of arrays. In the innermost ng-repeat, I am attempting to bind to task.conten ...

Navigating cross domain JSONP cookies in IE8 to IE10 can be a real headache

For reasons completely out of my control, here is the current scenario I'm faced with: I have a product listing on catalog.org When you click the "Add to Cart" button on a product, it triggers an AJAX JSONP request to secure.com/product/add/[pro ...

Modify a particular entry that is being looped through in PHP

Currently, I have coded the following: <div class="row"> <div class="col-lg-12"> <table id="usertable" class="table table-bordered table-hover text-center"> <thead> <th class="col-lg-1 text-center">User ID</th> ...

execute the function whenever the variable undergoes a change

<script> function updateVariable(value){ document.getElementById("demo").innerHTML=value; } </script> Script to update variable on click <?php $numbers=array(0,1,2,3,4,5); $count=sizeof($numbers); echo'<div class="navbox"> ...

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...