Currently Im working with Laravel and Vue, and now I want to use a 3rd party javascript library for tag-input fields. https://github.com/xoxco/jQuery-Tags-Input
I have to initialize the field in javascript by calling:
$('#tags').tagsInput();
However the tag-input field is inside of my vue component. I have tried calling this line from vue but that is not working.
Now I want to know which options do I have? Can I declare a function on my javascript and call that from within the Vue component? Can I pass the entire thing as a variable? Or are there other solutions to this case?
Someone who has experience with this and perhaps knows the right steps I have to take? Thanks in advance.
You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('#tags')).tagsInput();
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag
Related
Go here (Chrome seems to work best for this example):
https://jsfiddle.net/gongzza/m67d8f4x/2/
Type a#b.com into the input. Notice how the error goes away. Now clear the input.
In the console, programmatically set the value of the email with:
$('[name=email]').value = 'a#b.com'
Notice how the input changes but the validation does not get refreshed.
My recommendation is that you should use Vue to manipulate the values of these things. The only reason I can imagine you're trying to use jQuery here is because you're doing it from outside the Vue app. Given that, you would be better served to do this:
$('#app').__vue__.email = 'a#b.com'
That way Vue will notice the change and do it's own event handling. I'm not sure there's a more "official" way to access the Vue data, but this is the way I've done it before.
I'm trying to wrap a TexField ui to a new custom component so that I can add extra functionalities and reuse the component within the project. I want it to still have the v-model binding so I implemented the following:
:text="text"
and
#textChange="(update)=>{$emit('textChange', update.value)}"
Wherein "text" is its prop named and exposed exactly as a normal TextField prop.
The pattern should work on web but I don't know if it's possible on nativescript vue component. Please have a look at the code I made in playground: https://play.nativescript.org/?template=play-vue&id=Ikap1R&v=1
It's not working. Please help if you know the solution.
Thanks
There is nothing you have to do specifically for {N}, if you know how it works with Vue.js, you got it.
All you have to do is, use a value prop for input value and emit input event on change.
Updated Playground
I am not sure if I am adding my JS assets correctly and would like some advice if I am not.
In octoberCMS I have created a custom formWidget that uses the Google Maps API.
I am using my formWidget inside a child form that is rendered via AJaX as a modal when required.
If I use the following code in my widget class:
public function loadAssets(){
$this->addJs("http://maps.googleapis.com/maps/api/js?key=myappkeyhere&libraries=places");
$this->addJs('js/geocomplete/jquery.geocomplete.min.js');
$this->addJs('js/addressinput.js');
$this->addCss('css/addressinput.css');
}
The JS loads with the Page load and not when the widget is rendered. This produces these issues:
The google-maps API returns an error saying it has been loaded multiple times.
Events tied to DOM elements in the child fail since the elements are not in the DOM until the form is called.
The workaround I am using is to embed my JS into the formWidget partial.
Is there a way to make the addJS method work for the formWidget when it is part of a child form?
After some investigation, I realised that my formWidget using the addJs() method would make the widget JS available globally to the entire page even before the formWidget existed or was even needed.
While I could have created an elaborate, fancy JS involving listeners for DOM insertions and blah blah blah, this was not ideal (mainly because the widget properties change based on implementation).
The quickest/safest way to include JS that is tightly bound to a complex formWidget is to include it in the partial. This ensures the form widget will work properly both in a standalone form and in situations where the widget is part of child form that is created via an Ajax load.
(If you know of a better way please let me know)
I have a partial view that I am using to provide a pair of form select fields, and both sets of options depend on some variables set by a view composer for this view.
I would like to implement this view as a Form::macro instead so that I can parameterize some parts of it. However, I'm not sure how I can point the view composer at a macro instead of a partial view. Is this even possible?
I could go the route of pointing the composer at any view that I'm using the macro in, but I'd much rather have the option data load automatically any time I use the macro as it is a common component in my web app.
I use partials for some Bootstrap UI components, and create a macro to connect data into the template, so I only use HTML::macro or Form::macro to access them:
Form::macro('myMacro', function($data) {
return View::make('myPartial', $data);
};
This doesn't really answer the primary question, but one way I can get what I want is to use View::Make instead of #include in my views.
Where I was using:
#include('thepartial')
I can use something like this instead:
{{ View::make('thepartial')->with(array('param1'=>$param1, 'param2'=>$param2, ...) }}
This way I get the parameterization I want, and I still get the composer's effects.
I'm building a custom module in Drupal 6 which display a block with a form and some other elements like text and images. When it's submitted, using AHAH, some logic takes place in PHP and then the result is passed to JQuery which will update the elements in the block. Mainly a few images and some text.
I can't wrap my head around using AHAH, but it seems like that's what I'm supposed to be using. Currently I have my form with the submit button implementing '#ahah' and the path is set to a path defined in my menu hook. The menu hook passes it to the callback function which performs the logic then I'm at a dead end. How do I get the results to jQuery?
Any ideas?
Howie
Figured out a solution using: http://drupal.org/project/examples.