I am trying to use HTML widget to display device and child devices property. I created a group and created 3-4 child devices under it. When I am using {{device.name}} it is showing the data of the group properly since I chose it as parent asset. But when I am trying to use {{device[12345].name}} it is not shoiwng anything.
did a rookie mistake , it will be {{devices[12345].name}}
Related
I want to make data grid component in vue3
But the problem is, for different type of data, I need to add different type of action buttons.
Please see the image bellow, I have described in the photo, what I want.
Please advice me.
Codes zip link given below:
Click here to get code
I was hoping I could get some feedback on something I'm working on. I'm building an application that is essentially a bunch of data tables. Part of my requirement is not to use any additional frameworks (vuetify) or any type of store (vuex).
Currently, my application is constructed as follows:
API call upon creation of app
That data get's passed into a component where I would like to do all my searching/filtering
From there the next component is built specifically for Pagination
Then to the component that builds the data tables.
My question is, since I have this top down approach, how do I build both the search and filter functionality to where I don't have to pass anything back up to the parent components?
I am using scoped slots to pass/inject data into child components. My first thought was that I would have a computed property that returns an array in the control component and then pass that down to the pagination component, which works, but how do I also use that same array if I want to be able to filter results and also search filtered and none filtered items? Essentially to be able to mock the functionality of some of the Vuetify tables.
I assume you don't want to pass data/prop-drill between 3 component layers?
You can use provide/inject.
You can provide a "setArrayData" method to the child components (2 and 3 levels deep) and also provide "arrayData" data property.
You can also an event bus (see vue docs). In Vue 2 an event bus is built in, in Vue 3 it's not.
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
On click of button in reactjs i want to increment one variable named counter and this increment happens through server side.
Once response comes from express server I want to set returned value in different react component.
How do two different react components communicate in such scenario.
I am using commonJs approach for each components so each component is in different file .
How can I achieve this functionality?
It is like clicking on button adds item to cart for which communication to server is required.
Basically it seems you need a modeln I see three possibilities:
Write a model manually inside a specific file/module, update it when the server send the information and bind it to your views with EventEmitter
https://github.com/Olical/EventEmitter
You could use backbone so you can have models,collections and native events on update/change...etc http://backbonejs.org/
Implement the Flux pattern for reactjs : https://facebook.github.io/react/docs/flux-overview.html
Depending on your needs you can choose one of them.
I'm trying to add tooltips to a Dojo application that I recently inherited. The problem I'm having is that everything is created with dojoAttachPoint identifiers instead of with id's , such as :
so, I can't use "connectId= " when defining the tooltip, until I get a hold of the element's id that I want to connect to. Basically my question is, how can I find the id based on the dojoAttachPoint?
Thanks much for any suggestions!
The attach point is either going to be a domNode or a Widget based on whether it has a dojoType or not so if you have an attachPoint to a widgit then you can access connectid with this.myAttachWidget.connectid assuming that the attachPoint is in a widgets template.