Suppose I have a custom directive that fetches an array result from certain location , How could I possibly use v-repeat alongside my directive internally rather than separately calling v-repeat externally.
In Vue, you normally use directives (http://vuejs.org/guide/index.html#Directives) to modify the behavior of an existing DOM element. The behavior you are describing is more suited to a component (http://vuejs.org/guide/index.html#Components).
You would declare a component with a template attribute that either inline or via reference to a <script> style template would have markup that would include usage of v-repeat.
Related
The documentation is quite clear on how to create a custom directive using app.directive() the "old way", but that does not take into account the composition API way of doing things.
What I expect is something like:
import MyDirective from "#/directives/MyDirective.vue" inside a component.
Use the directive in the component's template like <div my-directive></div>.
Preferably without having to add boilerplate like registering the directive in main.ts or anything of the sort.
However, I can't find any clear example or docs page describing this. Is this at all possible? How should I do it? Please include an example of the directive's definition itself.
This question already has answers here:
Pass data to a directive?
(2 answers)
Closed 1 year ago.
I am creating a component system that will let other developers write vue applications with the components to quickly get up and running with simple forms.
My components are very general, and expect plain values to be bound to their value property, and will emit plain values with their input events.
The data we want the components to control is complex. I've read that you cannot use classes as vue data, because vue expects plain javascript objects for data. So each piece of data is an object like
{
_value: ...
setVal(): ...
getVal(): ...
}
And we are binding like
<my-component
:value="dataObject.getVal()"
#input="dataObject.setVal($event)"
/>
I thought it might be possible to write a vue directive to shorthand those properties, like how v-model is a shorthand for :value and #input normally, so that I could write
<my-component v-my-directive="dataObject" />
and it automatically binds the right thing to :value and the right thing to #input, but it doesn't seem to be that simple. I've found tutorials that mention twoway for Vue v1 directives, but that was removed in Vue v2, which recommended using a wrapper component as a replacement. But we have a large library of components, writing and maintaining a wrapper for each one seems out of line for just creating a shorthand like what already exists. Is there any other way?
vue2 only allows v-model directive to be bound to :value/#input. So you need to use both v-bind and #on directives for 2 way binding.
vue3 combines these using a convention that allows for multiple v-model bindings
You create a prop called 'foo' and emit and event called 'update:foo' with the value you want to assign to it.
The parent component uses v-model:foo to bind to it.
I am suing https://github.com/DominikSerafin/vuebar directive in my project. Now depending on some var i want to use it in html or not.
Like this
<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>
So to sumarize:
<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code
Is there any way that i can say something like:
<div some_var ? v-bar:''></div>
Or to make my directive that sort of inherits that v-bar and renders?
Actually you can do one thing. Use Directive Hook Arguments.
You can put your condition based on the hook arguments inside the directive's code. And you can make sure the those hook arguments are reactive so that it could change when you want it to.
Write you logic whether to do something or not for directive inside the directive's code depending upon the binding values.
Read this, please comment if you are not clear.
No, there is no way to apply directive with some condition.
But you can try to create and destroy custom scroll bar programatically, from docs:
Public methods.
You can access them from your component context: this.$vuebar.
Alternatively you can access them from your main Vue instance:
Vue.vuebar. Every method needs to have passed Vuebar scroll container
element as the first argument. You can do that easily using $refs.
initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)
I'm using a Vue 2.0 directive to apply a Twitter Typeahead to the input. I've been able to get it to apply the value back to the Vue model in a way that feels like a bit of a hack, by looping through the context, finding the parent object and calling my method setAutocmpleteValue()
HTML setup for Vue Custom Directive
<input class="typeahead" type="text" placeholder="Search" name='typeahead'
v-typeahead="getFieldValues(part.fieldName)"
v-model="part.value" v-bind:value="part.value"
v-on:change="updateTest()" #input="onValidChange()" />
Custom Directive
Vue.directive('typeahead', {
inserted: function(el_, binding,v) {
// this feels like a hack, is there a better way?
v.context._self.parent.setAutocmpleteValue('test');
}
})
Within a directive $emit is not available to pass an event, is there a better way to call setAutocmpleteValue()?
In Vue 2, directives are intended for DOM manipulation.
Note that in Vue 2.0, the primary form of code reuse and abstraction
is components - however there may be cases where you just need some
low-level DOM access on plain elements, and this is where custom
directives would still be useful.
They are not intended for setting data values and attempts to do so will rely on hacks like you are using.
Not only that, but this is a very fragile approach. The directive in the question is dependent on a method in the parent of the current context. What if the input element was two levels down or more?
You're much better off implementing a component.
However, given you are already hacking, $emit is available from the context.
v.context.$emit("some-event", someData)
The context is the Vue or Vue component containing the element to which you have attached the directive, so you would want to listen to it from the parent of that component.
In the skeleton-nav app.html, the nav-bar is imported like a custom element using the require statement and can by used like a custom element using tags , but according to the docs you also need to define it by importing customelement or by using CustomElement convention. However, the nav-bar.js does not use customelement or the convention but you can still use it as a custom tag in your html. What is the difference between the nav-bar template and one defined using the customelement syntax. By using require on any template does this mean that it is automatically a custom element, is this another convention?
I believe that the documentation is simply not up to date. Because in previous version i indeed needed to use the convention but as you said it is not necessary anymore. Just a camelcase name should be enough fir any custom element. But you still need the convention for the custom attribute I believe.