I'm trying to use the new puppeteer-based Chrome Devtools: Recorder
To make selectors more simple I would like to set each component name as data-v-name="MyButtonVue" and set every key in v-for :key as data-v-key for components with dynamic ordering
Or I need a library with equivalent possibilities
I was looking for a library which can do that but failed to find proper search terms
Related
I've started using VueJS a month ago. I've watched many tutorials to learn the language, but generally I never see developers using the DOM methods such as getElementById or getElementByClassName to make manipulations onto an element that is inside of a component or inside a view.
I'd like to give an example to make my statement more clear.
For example lets suppose that we have a nested component called UsernameInput that is an input[type="text"].
Instead of having to pass the value through the #input directive, we could get the value from the parent using the document.getElementById(/* Id Of The Input /*).value . I know that Vue uses the Virtual DOM for the rendering to make it faster. But does using VanillaJS affect it in any sort of way? And why is it so rarely used in front-end frameworks
I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.
I have not been able to find any solution with just using a Vue template. Is there one?
This is how I would like to be able to use the component:
<factory elm="first-component"></factory>
The factory should then internally in some way result in this:
<first-component></first-component>
(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)
There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?
From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).
Here is an example from some tutorial:
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
alert(range); // ample: italic and bol
// use this range for selection (explained later)
window.getSelection().addRange(range);
</script>
How to do this with vue?
Should I use query selectors too?
I am interested how to do this selection manipulation within contenteditable. I can use "ref" for contenteditable container but inner content with bold, italic etc. tags is dynamic and mark this code with refs:
... <b><i>some text</i></b> ...
isn't appropriate.
If you're using the Selection API to manipulate the DOM (not just creating ranges, but adding/removing/modifing/reordering DOM nodes), then you should be doing those manipulations on DOM elements not managed by Vue. You must not modify parts of the DOM managed by Vue because Vue won't know about those changes and it will get confused when trying to patch the DOM during the next render cycle. Vue "owns" the rendered DOM of its components.
This doesn't mean you can't use the Selection API and Vue together, it just means you need to be careful not to tinker in the DOM willy-nilly.
Should I use query selectors too? Using p.querySelector('b').firstChild isn't vue way but I don't know what should I use insted
This rule only applies if you want to get a reference to a DOM node rendered by Vue. If the container were content editable, then its contents would not be managed by Vue and you would have no way of referencing its contents without using querySelector and other DOM functions. Try not to get caught up with "am I doing it the Vue-way?" when what you are trying to do is inherently not Vue related anyway.
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 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.