Vue3 Value

Posted on  by admin

Modified8 months ago. My project is based on Vue3 and I use the component called 'el-tree' provided by 'element-plus'.

For accessing I define a variable called 'tree' which value is ref(null) in setup() method. Then I wrote an attribute ref called 'tree' in 'el-tree' in my template code.

I think that the ref value of 'tree' in the whole setup() method is null.

But why it has value when I log it in the callback function of promise. You are accessing tree right after defining it but before the component is created, that's why it is still not a Proxy.

All your ref will become Proxy after your components are created. That is why you can see the change in value when the promise resolves.

In order for this to not happen, you should make sure to never access your refs right after defining them in the setup function. Use always a lifecycle hook for that:.

Blai SamitierBlai Samitier. Modified10 months ago. I am new to Vue and am currently creating a table with dynamically displayed abbreviations.

I try to emit a searchTerm from my child component to the parent, but I couldn't figure out how to do this.

My problem is, that when I try to seperate the search input and the table, the value is not emitted to the parent.

I tried solving this by defining props and a export default, but somehow my component doesn't accept this.

Thanks in advance. You need to listen to the search event that is emitted from your child at the parent component.

Notice the @search listener at SzShorty where you include sz-searchfield component. Read more about Vue emit in the documentation.

I have added a console.log() at the parent component which prints search along with the search term emitted from the child component.

You can send data from a child to a parent component by means of Vue's built-in $emit() method. The first parameter of $emit is the event that should be listened for in the parent component.

The second (optional) parameter is the data value to pass. Please modify the code to listen to the search event that is emitted from the child component to parent component.

  • Udayakumar MUdayakumar M.
  • ##002 setup function: with composition API in Vue3 we need to implement the setup function. Setup function will contain and will return an object (see point ##007) and functions needed by template;
  • ##003 declare the reactive object with properties and also computed properties. To make it reactive we will use “reactive()” function;
  • ##004 we can include also “computed properties” in the reactive object. You can access to computed properties accessing to the object properties (game.total in this case);
  • ##005 implement the roll() function in order to change the value of dice and adding on top of the array rolls the new dice value (to keep track of all rolls);
  • ##006 implement the restart() function in order to re-initialize “dice” and “rolls” (we are accessing to them as object attribute);
  • ##007 this is a new thing for Vue2 users (because the setup() method). We need to return an object with all stuff needed in the template. In order to access directly to attributes in the template as “dice” instead of “game.dice” you need to use destricturing functionality (…object). To keep the destructured object reactive, you need to use “…toRef(object)”. If you don’t use “toRef()” and you try to use just“…object”, you will loose the reactivity of the properties.

This is a list of useful links:

  • the sources: https://github.com/roberto-butti/vue3-demo-rollthedice
  • the component with reactive(): https://github.com/roberto-butti/vue3-demo-rollthedice/blob/master/src/components/RollTheDiceReactive.vue
  • the component with ref(): https://github.com/roberto-butti/vue3-demo-rollthedice/blob/master/src/components/RollTheDice.vue
  • Vite web dev build tool: https://github.com/vitejs/vite
  • Vue3 composition API cheat sheet: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf
  • Vue composition API: https://composition-api.vuejs.org/api.html
  • Vue3 essential course by Vuemastery: https://www.vuemastery.com/courses/vue-3-essentials/

I’m exploring Vue3 so if you have some feedback, please let me know in the comments. Thank you!