What is the reason for the quotes appearing around a ref() string?

Question

What is the reason for the quotes appearing around a ref() string?

Examining this code snippet, we see a string displayed that represents the content of a ref()

<script setup>
import { ref } from 'vue'

const msg = ref('x')

const asyncCall = () => {
  const result = ref('one')
  setTimeout(() => {
    result.value = 'two'
  }, 2000)
  return result
}

msg.value = asyncCall()

</script>

<template>
  <h1>{{ msg }}</h1>
</template>

What causes the quotation marks around the displayed value ("one" and "two")?

Displayed below is an animated screenshot illustrating how "one" transforms into "two" when the window is reloaded.

https://i.sstatic.net/FZjgc.gif

javascript vue.js vuejs3

Answer 1

Answer №1

To resolve the issue, you can simply change `return result.value` to return `.value` when returning the result:

 return result.value

Although this method works well, I personally prefer utilizing a Vue approach like using computed properties or watch:

<script setup>
import { ref , watch} from 'vue'

const msg = ref('x ')
 const result = ref('one')

const asyncCall = () => {
  setTimeout(() => {
    result.value = 'two'
  }, 2000)
 
}
asyncCall()

watch(result,(v)=>{
  console.log(v)
  msg.value=result.value
},{
  immediate:true
})
  
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

Answer 2

To resolve the issue, you can simply change `return result.value` to return `.value` when returning the result:

 return result.value

Although this method works well, I personally prefer utilizing a Vue approach like using computed properties or watch:

<script setup>
import { ref , watch} from 'vue'

const msg = ref('x ')
 const result = ref('one')

const asyncCall = () => {
  setTimeout(() => {
    result.value = 'two'
  }, 2000)
 
}
asyncCall()

watch(result,(v)=>{
  console.log(v)
  msg.value=result.value
},{
  immediate:true
})
  
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

Answer 3

Answer №2

Objects and arrays remain as is in templates without being unwrapped. Here's an example:

import {computed, ref} from "vue"

const object1 = [
  computed(()=> "some thing"),
]

const object2 = ref([
  computed(()=> "some thing"),
])
//Both, object1[0] and object2[0] will display "some thing", with quotes.

To access the computed value:

{{ object1[0].value }}

In current version [Vue 3.4], when you output the whole computed object, it runs through JSON.stringify(), resulting in the quotes.

Summed up:

return.value

Useful Links:

Related GitHub issue: https://github.com/vuejs/core/issues/5519
Understanding Vue reactivity: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods

Answer 4

Objects and arrays remain as is in templates without being unwrapped. Here's an example:

import {computed, ref} from "vue"

const object1 = [
  computed(()=> "some thing"),
]

const object2 = ref([
  computed(()=> "some thing"),
])
//Both, object1[0] and object2[0] will display "some thing", with quotes.

To access the computed value:

{{ object1[0].value }}

In current version [Vue 3.4], when you output the whole computed object, it runs through JSON.stringify(), resulting in the quotes.

Summed up:

return.value

Useful Links:

Related GitHub issue: https://github.com/vuejs/core/issues/5519
Understanding Vue reactivity: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods

What is the reason for the quotes appearing around a ref() string?

Answer №1

Answer №2

Useful Links:

Similar questions

Discover the steps to implement a live user list in a chat application with the help of angular.js, socket.io, and node

Using a loop to iterate through a multidimensional array in Node.js or JavaScript, creating additional data and adding new key-value pairs

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Using THREE.js: Object3D Dimension Shrinkage

Issue with the binding of ng-options in AngularJS is unresolved

Automatically create subclasses and reclassify object lists with CanJS

I am experiencing difficulty running Vue.js projects that I downloaded in Visual Studio Code and keep encountering the following error message: ERR! For a detailed log of this issue, please refer to:

I encounter issues with my fetch request as it is denied while attempting to access the HTML content from the specified

Easily integrate an HTML form as an input for your Python script

Utilize JavaScript to Trigger AJAX HoverMenuExtender in .NET

In Android, when you invoke a PHP file that contains JavaScript code, the result of the call is the execution of the JavaScript code

Develop an innovative showcase page showcasing 151 individual profiles with React Router

Insert the URL into either a div or an iframe

Tips for merging arrays conditionally in JavaScript

include a new key value pair in the response object

Enhancing Vue JSX functionality: Tips and strategies

single calendar bootstrap-datepicker allowing users to select date ranges

Setting environmental variables throughout your application using create-react-app on the front end

ExtJS variable not populating with servlet data

Is it possible to apply styles to the body of a document using styled-components?