This is the code: https://codesandbox.io/s/veevalidate-with-vueselect-13g9d
I'm using a custom component because I want to override a couple of slots in VueSelect. I'm using the ValidationProvider but that doesn't seem to be working.
I've looked for help but only found examples using VeeValidate 2.x.
I've figured out how it works. By default, VeeValidate validates the input only after the blur or input events on the child elements of ValidationProvider. If you want it to validate on custom events, you can implement a custom mode for the custom component and specify the mode attribute on the ValidationProvider.
For example: https://codesandbox.io/s/veevalidate-with-vueselect-13g9d (my updated codesandbox link).
Related
I created a custom widget using angular 10, Now I wanted to add a datapoint list in the configuration(edit) and access it
I am using c8y-data-point-list directive but my angular application not able to find this selector/associated component.
so my first question is how to use the existing angularJs component in angular? how to import it?
is it possible?
I also want to use more widget in a custom widget from ng1-module, how to achieve it?
c8y-data-point-list is not in the official list of cumulocity components, so it's not possible to use it.
Also the highest version of angular would be the 8th, as they currently only support it and still use angularJS components.
What problem does this feature solve?
<code-box title="基本" describe="button基本用法">
<i-button>Default</i-button>
</code-box>
I want to get default Slot String like <i-button>Default</i-button> in codeBox.
I can find then api _slotContents in vue 1.x.
Is there any way can get the same function in vue 2.x?
What does the proposed API look like?
_slotContents in vue 1.x
If I understand correctly, you want to use scoped slots.
If for some reason you really want to get the rendered html inside your component you can use this.$el.innerHtml.
I am trying to use a web component which extends an existing element using the "is" attribute tag, but vue takes that attribute and converts it into a custom element.
I need vue to still recognize the v-model and business logic, but I also need vue to not change it to a custom component.
Vue turns this:
<textarea v-model="text" is="my-component"></textarea>
into:
<my-component></my-component>
I have tried setting "v-pre" but that keeps vue from tracking the v-model. I have also tried to set ignoredElements, but vue still convert to a custom element. I looked https://github.com/vuejs/vue/issues/2642 and it seems like this is supposed to be a fixed issue, but maybe I am missing something.
Here is a minimal example of what is happening: https://jsfiddle.net/ntkg1xeq/1/
Notice that the textarea turns into real-set in this example.
I would expect vue to disregard the "is" attribute if it does not match any registered components, and to not rewrite the element thus preventing the web component from working.
Is there any way to use vue and web components like this together?
According to the last comment of Web component with "is" attribute not rendered in the view., <textarea v-pre v-model="text" is="my-component"></textarea> would be
render to <textarea is="my-component"> just as your expectation. However, it seems the issue just fixed Vue 1.x ( Vue 1.0.12 example code ), not Vue 2.x ( your example code ).
So. if you want to set is attribute in textarea and make v-model works in Vue 2.x, I thought $refs is another solution ( Vue 2.x example code by using $refs ).
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:)
Hi I am looking for a solution for two way binding in Vue.js 2. I found a answer here about two way binding but it is in Vue.js 1. I tried to work it in Vue.js 1. But it didn't work. Can anyone help me here.
Why I want that?
A - I have a contenteditable div and a span tag inside which is shows a variable with v-html. But I want some functions to call when some edit happens. #change and #keyup don't work with span in vuejs 1. So I moved to custom directives.
To support something like this in vue2.0: as suggested by Evan You in forum here is to put these kind of functionality in a component and to reuse the same functionality on multiple components you can extract it into a shared mixin.
My suggestion is that the logic should be handled inside the component. In 2.0 v-model can work on components, e.g. https://github.com/vuejs/vue/blob/next/examples/select2/index.html
If you want to reuse the same logic on multiple components you can extract it into a shared mixin.