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
Related
I have a question. I have a component called ValidateCheckboxes. ValidateCheckboxes is a validated list of checkboxes. I pass checkboxes to this component by props. It look like that:
enter image description here
enter image description here
I am displaying checkboxes using v-for:
enter image description here
but my label look like this:
enter image description here
How to render custom component from string? Or maybe should I use another way to do that?
It's my first question, thanks for answers. :)
I tried use v-html but it didn't work.
You should use slots, as they provide more control.
If you absolutely can't do that because stuff is loaded from a file, database or otherwise fetched from API - you can look into h() and compile() - How I can render a component from a string with vue 3?
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I created a component and used it with vue-router. However, when I update the webpage it told me that "the data 'sss' is not defined."enter image description here
and this is my component:
enter image description here
I am sure that I have already define the data. so what's wrong?
It looks like you just have a type, it's data not deta
Also for future reference please copy and paste your code, don't post screen shots otherwise we will have to type everything out if your question requires an answer with the code.
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.