I use vue.js. I want add vue model in selector, who created using jquery plugin.
My code:
<div class="app">
<div class="wysiwyg-wrap"></div>
</div>
<script>
new Vue({
el: '.app',
data: {
wysiwygText: 'text demo'
},
created: function(){
$('.wysiwyg-wrap').trumbowyg();
}
});
</script>
Jquery plugin trumbowyg create inside '.wysiwyg-wrap' many html elements. How to add in one of this elements v-model binding? I want type in my redactor and save result in 'wysiwygText' from vue model.
Thank you for any answers!
This is a great use-case for custom directives. Here is an example of a custom directive that adds jQuery functionality to Vue: https://vuejs.org/examples/select2.html
You can create a simple directive
Vue.directive('wysiwyg-wrap', function () {
$(this.el).trumbowyg();
});
Then attach it to any element
<div class="app">
<div v-wysiwyg-wrap></div>
</div>
Related
I have a loop of data and have a modal for each loop
<div ref="vuemodal-{{loop.index}}">
It's a bootstrap modal and to each of them I want to bind an event whenever I close the modal
mounted(){
Object.keys(this.$refs).map((val) => $(this.$refs[val]).on("hidden.bs.modal",
this.doSomethingOnHidden))
}
I don't seem to access the object properly
First thing, your ref is not dynamic, it's a string. So make it dynamic by binding this using the bind (v-bind or :) operator.
Second thing, mustaches cannot be used inside HTML attributes, so {{loop.index}} won't work.
Here is the demo-
new Vue({
el: "#app",
mounted() {
Object.keys(this.$refs).map((val) => console.log(val))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="index in 5" :ref="`vuemodal-${index}`">
It's a bootstrap modal and to each of them I want to bind an event whenever I close the modal
</div>
</div>
I found a codepen that demonstrates it's possible to combine #input with contentEditable to create custom input dom, without it has to be an input element. However, I wasn't able to add #input with JSX in VueJS. Is it not possible using jsx?
Here is the demo without using JSX, #input works in regular dom:
https://codepen.io/supraniti/pen/Lypobx?editors=0010
Thanks
JS
Vue.component('editable',{
template:'<div contenteditable="true" #input="update"></div>',
props:['content'],
mounted:function(){
this.$el.innerText = this.content;
},
methods:{
update:function(event){
this.$emit('update',event.target.innerText);
}
}
})
var example = new Vue({
el: '#example',
data: {
text:"This text is editable!"
}
});
HTML
<div id="example">
<editable :content="text" #update="text = $event"></editable>
<div>
<pre>{{$data |json }}</pre>
</div>
</div>
ahhhhhh nvm. I found in JSX, you can actually use onInput on regular span!
Hope it saves someone's time!
In my JSFiddle example, I'm trying to define a custom Vue component: https://jsfiddle.net/50wL7mdz/402951/ .
Unfortunately, nothing is rendered. Why?
The code:
HTML:
<script src="https://unpkg.com/vue"></script>
<blog-post title="hi again!"></blog-post>
JS:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
You forgot to create a Vue. Wrap the <blogpost> component into a div and create a Vue using that div as the template.
Like so
HTML:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<blog-post title="hi again!"></blog-post>
</div>
JS
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
el: '#app'
});
Look at the documentation documentation
Here is the working fiddle
My friend I recommend you another option, that I preferred. Please use, if you want, sandbox where you can add or modify components much much easier.
Here is the sandbox link.
I'm using VueJS 2.0
Is there any way to make the below render as a link?
Here is my vue component:
<template>
<div v-html="markup"></div>
</template>
<script>
new Vue({
data() {
return {
markup: '<router-link :to="{path: 'https://www.google.com'}"></router-link>',
});
},
});
</script>
In the above example, I want to dynamically export a piece of markup, it contains some dynamic contents, such as router-link like above.
But that content did not compile, and exports a <router-link> tag as a final result.
Any way to make it compile programmatically?
What I really want is to find a way to compile a piece of html manually. If v-html doesn`t work, Is there any other way?
v-html works only for pre-compiled html which is basically generated text.
If you want do dynamically change content, simply use if conditions to render your list view based on prop that will tell you the type of the list view.
I don't think it's a good idea to save the markup in your db. It's rather more convenient to save some settings in your db and based on those to render the necessary html. (the prop type in your case). Maybe if you provide a more concrete example, some suggestions will follow. As you can see, the answers were based on your router-link example which I think is not enough to answer your question
I don't think you can instantiate Vue instances via v-html directive. You must override the default to do that, which would take lots of efforts.
If you just want dynamic links, why not try this:
data: {
menu: []
}
and then :
<router-link v-for="item in menu" :to="item.src">{{item.name}}</router-link>
PS: Can you give an example that you must do such things? I am really interesting in what needs it would be.
Given that you want to render a list of links, one way to do this can be like this:
<template>
<router-link v-for="list in lists" :to="{path: list}"></router-link>
</template>
<script>
new Vue({
data() {
return {
lists: ['https://www.google.com', 'https://www.stackoverflow.com']
});
},
});
</script>
Edit:
You can use an approach like following as well using with the help of dynamic components.
Vue.use(VueRouter)
new Vue({
el: "#app",
data: {
dynamicComp: "router-link"
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.0/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
somethind
<component :is="dynamicComp" :to="{path: 'https://www.google.com'}"></component>
</div>
I am creating chatbox, and that chat box is dynamically generated on click of contact.
In dynamically generated HTML I have a textarea to enter some text, here is the HTML
<div class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event, 'id', 'name')"></textarea>
</div>
But the method "checkChatBoxInputKey" is not executing on any key down event.
Please let me know how to solve this.
It doesn't work because Aurelia's view compiler doesn't have an opportunity to compile dynamically generated markup to find the bindings, etc.
Use the if binding to add/remove an element from the DOM. Here's an example:
http://plnkr.co/edit/kBUz94?p=preview
<template>
<button click.delegate="showChatBox = true">Show Chat Box</button>
<div if.bind="showChatBox" class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event)"></textarea>
</div>
</template>
export class App {
checkChatBoxInputKey(e) {
console.log(e.which);
return true;
}
}