In my vue project, i am tring to upgrade from 1.x to 2.x. And I come across a problem as following:
<div id="demo">
<service :service-name="serviceName" ref="testcomp" v-if="runTest"></service>
</div>
on the child component service, I use v-if to control its existence. And in the parent component, I want to use this.$refs.testcomp to invoke the method test defined inside the child component as following:
methods: {
init() {
this.runTest = true;
},
},
mounted() {
this.init();
},
watch: {
runTest() {
if(this.runTest) {
console.log('1');
this.$refs.testcomp.test();
console.log('2');
}
},
},
But the error message said that this.$refs.testcomp is undefined. I have created the live demo with jsfiddle: https://jsfiddle.net/baoqger/0r4vby5n/1/
But in vue1.x, it can work well. https://jsfiddle.net/baoqger/fzuajwkz/1/
I know change to v-show, can skip this issue. But in my real project(it is an big project, developed by others. So if i change v-if to v-show, it will trigger other issues related to work flow). So is there any way to make the v-if still work in the upgraded version.
I think it is because when you called this.$refs.testcomp.test() the element is not ready yet. Try doing this instead:
this.$nextTick(() =>{
this.$refs.testcomp.test();
})
Related
I hope somebody can help me with my vue.js question regarding version 2.6.14
I created a component "dynamiccontent" capable of displaying html string generated from a backend api (with vue variables/functions in). the component utilizes vue.compile and render functions. it works great for the test case "slide working" in the app when I use my code for normal html tags.
here is the test function
Vue.component("test-slide", {
template:
'<div :key="slide.id"><dynamiccontent v-bind:slide="slide"></dynamiccontent></div>',
props: ["slide"]
});
var vm = new Vue({
el: "#player",
template:
"<div>working: <test-slide v-bind:slide='slideworking'></test-slide><br> problem: <test-slide v-bind:slide='slidenotworking'></test-slide></div>",
methods: {
test() {
return "test";
}
},
data: function () {
return {
slideworking: {
id: "dkd",
content:
"<div>test {{this.getDynamic()}}<div><div>test {{this.getDynamic()}}<div>test {{this.getDynamic()}}</div></div></div></div>"
},
slidenotworking: {
id: "dkd",
content:
"<div>test {{this.getDynamic()}}<test-component>{{this.getDynamic()}}<test-component>test {{this.getDynamic()}}<test-component>test {{this.getDynamic()}}</test-component></test-component></test-component></div>"
}
};
}
});
as soon es I try to use variables in cascaded components (see the sample data "slide notworking", which uses vue components as well, in this example testcomponent) the compile function seems to ignore all the Childs.
The Problem as a codepen with the demo source
codepen.io
What is expected?
vue.compile should compile the child components as well
What is actually happening?
vue compile seems to stop at the first vue component
I'm using single-file-components in a larger project and I'm new to Vue.JS. I'm looking for a way to dynamically create components, especially their templates on-the-fly at run-time.
My idea is to create a "component factory" also as a SFC and to parameterize it with props, e.g. one for the template, one for the data and so forth. I get how this works for already specified SFC and that I can simply exchange them with <component v-bind:is= ..., however the task here is different. I need to compose a template string, which potentially is composed of other component instance declarations, on-the-fly and inject it in another SFC. The code below doesn't work unfortunately.
<template>
<div>
<produced-component/>
</div>
</template>
<style></style>
<script>
import Vue from 'vue'
export default {
props: {
template: { type: String, default: '<div>no template prop provided</div>' }
},
components: {
'produced-component': Vue.extend(
{
template: '<div>my runtime template, this I want to be able to compose on-the-fly</div>'
}
)
}
}
</script>
It says:
The following answer: https://stackoverflow.com/a/44648296/4432432 answers the question partially but I can't figure out how to use this concept in the context of single-file-components.
Any help is greatly appreciated.
Edit 2020.03.16:
For future reference the final result of the SFC factory achieved as per the accepted answer looks like this:
<template>
<component:is="loader"/>
</template>
<script>
const compiler = require('vue-template-compiler')
import Vue from 'vue'
export default {
props: {
templateSpec: { type: String, default: '<div>no template provided</div>' }
},
computed: {
loader () {
let compSpec = {
...compiler.compileToFunctions(this.templateSpec)
}
return Vue.extend(compSpec)
}
}
}
</script>
You can surely have a Factory component with SFC; though what you are trying to do is a very rare case scenario and seems more like an anti/awkward pattern.
Whatever, you are doing currently is right. All you need to do is - use Full build of Vue which include the Vue Template Compiler, which will enable you to compile template at run-time (on the browser when app is running). But remember that for the components written in SFC, they must be compiled at build time by vue-loader or rollup equivalent plugin.
Instead of using vue.runtime.min.js or vue.runtime.js, use vue.min.js or vue.js.
Read Vue installation docs for more details.
Assuming you are using Webpack, by default main field of Vue's package.json file points to the runtime build. Thus you are getting this error. You must tell webpack to use full bundle. In the configuration resolve the Vue imports to the following file:
webpack.config.js
module.exports = {
// ... other config
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
I'm building server UI and I'm struggling with components. Maybe someone knows how to stack all components and control all UI with functions?
example
App.vue
chat.vue
hud.vue
player.vue
I need to display all .vue in app.vue
App.vue
import chat from './components/chat.vue'
export default {
name: 'app',
components: {
chat
}
}
chat.vue
export default {
methods: {
test: function() {
console.log("test");
}
}
}
How can I call the function test in the DevTools console, when I run the webiste?
Do you know about the Vue Dev Tools browser extension? That will let you inspect all components on a page and tweak their data/props.
I don't think it will let you call their methods, but if you need to call one of those methods in the console you might try (temporarily, for testing purposes) making a component instance available on the window inside a mounted lifecycle function.
EDIT: Is that your entire App.vue, by the way? I'm thinking maybe I misunderstood your question and you think that...
components: {
chat
}
...means that it should render the component on the page. It only makes it available for the parent component to use. You have to place it inside a <template> to actually render it.
I am looking to setup emojis to my chat-app project.
I really liked the emojis in slack / tweeter and I would like to have something similar.
I found the following libraries: (if anyone can suggest a better library I would love to hear)
emojionearea
wdt-emoji-bundle
I am not sure how to load these libraries and use them in a VueJS app.
Could anyone please assist with how to load and use them?
I would like to mention I tried to use emoji-mart-vue
but not sure how to add the the component to the template at run time.
Thanks a lot
tldr; Checkout demo and code on JSFiddle
This answer is divided into two parts. First part deals with how to import all the stuff into the environment while the second part deals with how to use it Vue.
This solution uses EmojiOne as the emoji provider and EmojioneArea to provide emoji autocomplete behavior.
Part 1: Adding the libraries
There are three ways in which you can do this.
Using Global <script> tag (not recommended for anything serious): You can add the <script> tags for all the dependencies in order and simply start using the Global objects.
Add these <script> in order:
https://code.jquery.com/jquery-3.3.1.min.js
https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js
https://cdn.jsdelivr.net/npm/emojione#3.1.6/lib/js/emojione.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete.min.js
https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js
Using AMD modules (using require.js): You can use the following configuration to load these modules asynchronously using require.js
require.config({
paths: {
'jquery': 'https://code.jquery.com/jquery-3.3.1',
'Vue': 'https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue',
'emojione': 'https://cdn.jsdelivr.net/npm/emojione#3.1.6/lib/js/emojione',
'jquery.textcomplete': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete',
'emojionearea': 'https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea'
},
shim: {
'emojione': {
'exports': 'emojione'
}
}
})
You can then require these modules in your entry point as
require(['jquery', 'Vue', 'emojione'], function($, Vue, emojione){ /* ... */ })
Using webpack: All the above libraries are available via npm and you install and use them just as you would do with any other library. No special config required.
BONUS: Using webpack with require.js and offloading network and caching loads to CDN!
I often use this setup for my projects and this improves reliability and performance of your site. You can use webpack.externals to instruct webpack to not bundle any vendor dependencies and instead you provide them yourself, either by manually adding <script> tags or using require.js.
Start by adding this to your webpack.<whatever>.js
//...
output: {
libraryTarget: 'umd' // export app as a library
},
//...
externals: {
'jquery': 'jquery',
'vue': 'Vue',
'emojione': 'emojione'
},
//...
Then, in your require.js entry, add this
//...
map: {
// any module requesting jquery should get shield
"*": {
"jquery": "jquery-shield"
},
// shield should get original jquery
"jquery-shield": {
"jquery": "jquery"
},
// patch plugins
"jquery.textcomplete": {
"jquery": "jquery"
},
"emojionearea": {
"jquery": "jquery"
}
}
//...
// define shield, require all the plugins here
define('jquery-shield', ['jquery', 'jquery-textcomplete', 'emojionearea'], function($){ return $ })
and then add require(...) your webpack bundle
Part 2: Using EmojiOne with Vue
As the OP mentioned his/her case is to use emojis in a chat app, I would also explain the solution with that case, though this can (and should) be modified for other use cases too!
The solution focuses on two aspects. First is to simply display the emoji in a message component, i.e., no need to display an emoji picker dialog and second is to display a emoji picker dialog whilst the user is typing into (say) a textarea.
To achieve the first goal, you can use a message component like,
Vue.component('message', {
props: ['content'],
render: function(h){
return h('div', {
class: { 'message': true }
}, [
h('div', {
class: { 'bubble': true },
domProps: {
innerHTML: emojione.toImage(this.content)
}
})
])
}
})
This would create a <message /> component which you can use as
<message content="Hey :hugging:!!" />
which will render
<div class="message">
<div class="bubble">
Hey <img class="emojione" alt="🤗" title=":hugging:" src="...">!!
</div>
</div>
Now, to create a <message-box /> component that will display an emoji picker to assist in autocomplete, do as follows
Vue.component('message-box', {
template: `<div class="message-box"><textarea></textarea></div>`,
mounted(){
// find the input
$(this.$el).find('textarea').emojioneArea()
}
})
And that's it! Although it may seem like a lot, the crux of the solution is quiet simple! Just use emojione.toImage(str) to get a DOM string and apply it to the Vue component (you can also use v-html to do this but IMO render() is a bit more sleek!). And for the displaying the picker, you just call $(...).emojioneArea() on the <textarea /> once the component is mounted.
Make sure to checkout full code example at https://jsfiddle.net/riyaz_ali/5Lhex13n
So I'm building an application using Laravel Spark, and therefore taking the opportunity to learn some Vue.js while I'm at it.
It's taken longer for me to get my head around it than I would have liked but I have nearly got Vue-multiselect working for a group of options, the selected options of which are retrieved via a get request and then updated.
The way in which I've got this far may well be far from the best, so bear with me, but it only seems to load the selected options ~60% of the time. To be clear - there are never any warnings/errors logged in the console, and if I check the network tab the requests to get the Tutor's instruments are always successfully returning the same result...
I've declared a global array ready:
var vm = new Vue({
data: {
tutorinstruments: []
}
});
My main component then makes the request and updates the variable:
getTutor() {
this.$http.get('/get/tutor')
.then(response => {
this.tutor = response.data;
this.updateTutor();
});
},
updateTutor() {
this.updateTutorProfileForm.profile = this.tutor.profile;
vm.tutorinstruments = this.tutor.instruments;
},
My custom multiselect from Vue-multiselect then fetches all available instruments and updates the available instruments, and those that are selected:
getInstruments() {
this.$http.get('/get/instruments')
.then(response => {
this.instruments = response.data;
this.updateInstruments();
});
},
updateInstruments() {
this.options = this.instruments;
this.selected = vm.tutorinstruments;
},
The available options are always there.
Here's a YouTube link to how it looks if you refresh the page over and over
I'm open to any suggestions and welcome some help please!
Your global array var vm = new Vue({...}) is a separate Vue instance, which lives outside your main Vue instance that handles the user interface.
This is the reason you are using both this and vm in your components. In your methods, this points to the Vue instance that handles the user interface, while vm points to your global array that you initialized outside the Vue instance.
Please check this guide page once more: https://v2.vuejs.org/v2/guide/instance.html
If you look at the lifecycle diagram that initializes all the Vue features, you will notice that it mentions Vue instance in a lot of places. These features (reactivity, data binding, etc.) are designed to operate within a Vue instance, and not across multiple instances. It may work once in a while when the timing is right, but not guaranteed to work.
To resolve this issue, you can redesign your app to have a single Vue instance to handle the user interface and also data.
Ideally I would expect your tutorinstruments to be loaded in a code that initializes your app (using mounted hook in the root component), and get stored in a Vuex state. Once you have the data in your Vuex state, it can be accessed by all the components.
Vuex ref: https://vuex.vuejs.org/en/intro.html
Hope it helps! I understand I haven't given you a direct solution to your question. Maybe we can wait for a more direct answer if you are not able to restructure your app into a single Vue instance.
What Mani wrote is 100% correct, the reason I'm going to chime in is because I just got done building a very large scale project with PHP and Vue and I feel like I'm in a good position to give you some advice / things I learned in the process of building out a PHP (server side) website but adding in Vue (client side) to the mix for the front end templating.
This may be a bit larger than the scope of your multiselect question, but I'll give you a solid start on that as well.
First you need to decide which one of them is going to be doing the routing (when users come to a page who is handling the traffic) in your web app because that will determine the way you want to go about using Vue. Let's say for the sake of discussion you decide to authenticate (if you have logins) with PHP but your going to handle the routing with Vue on the front end. In this instance your going to want to for sure have one main Vue instance and more or less set up something similar to this example from Vue Router pretending that the HTML file is your PHP index.php in the web root, this should end up being the only .php file you need as far as templating goes and I had it handle all of the header meta and footer copyright stuff, in the body you basically just want one div with the ID app.
Then you just use the vue router and the routes to load in your vue components (one for each page or category of page works easily) for all your pages. Bonus points if you look up and figure using a dynamic component in your main app.vue to lazy load in the page component based on the route so your bundle stays small.
*hint you also need a polyfill with babel to do this
template
<Component :is="dynamicComponent"/>
script
components: {
Account: () => import('./Account/Account.vue'),
FourOhFour: () => import('../FourOhFour.vue')
},
computed: {
dynamicComponent() {
return this.$route.name;
}
},
Now that we are here we can deal with your multiselect issue (this also basically will help you to understand an easy way to load any component for Vue you find online into your site). In one of your page components you load when someone visits a route lets say /tutor (also I went and passed my authentication information from PHP into my routes by localizing it then using props, meta fields, and router guards, its all in that documention so I'll leave that to you if you want to explore) on tutor.vue we will call that your page component is where you want to call in multiselect. Also at this point we are still connected to our main Vue instance so if you want to reference it or your router from tutor.vue you can just use the Vue API for almost anything subbing out Vue or vm for this. But the neat thing is in your main JS file / modules you add to it outside Vue you can still use the API to reference your main Vue instance with Vue after you have loaded the main instance and do whatever you want just like you were inside a component more or less.
This is the way I would handle adding in external components from this point, wrapping them in another component you control and making them a child of your page component. Here is a very simple example with multiselect pretend the parent is tutor.vue.
Also I have a global event bus running, thought you might like the idea
https://alligator.io/vuejs/global-event-bus/
tutor.vue
<template>
<div
id="user-profile"
class="account-content container m-top m-bottom"
>
<select-input
:saved-value="musicPreviouslySelected"
:options="musicTypeOptions"
:placeholder="'Choose an your music thing...'"
#selected="musicThingChanged($event)"
/>
</div>
</template>
<script>
import SelectInput from './SelectInput';
import EventBus from './lib/eventBus';
export default {
components: {
SelectInput
},
data() {
return {
profileLoading: true,
isFullPage: false,
isModalActive: false,
slackId: null,
isActive: false,
isAdmin: false,
rep: {
id: null,
status: '',
started: '',
email: '',
first_name: '',
},
musicTypeOptions: []
};
},
created() {
if (org.admin) {
this.isAdmin = true;
}
this.rep.id = parseInt(this.$route.params.id);
this.fetchData();
},
mounted() {
EventBus.$on('profile-changed', () => {
// Do something because something happened somewhere else client side.
});
},
methods: {
fetchData() {
// use axios or whatever to fetch some data from the server and PHP to
// load into the page component so say we are getting the musicTypeOptions
// which will be in our selectbox.
},
musicThingChanged(event) {
// We have our new selection "event" from multiselect so do something
}
}
};
</script>
this is our child Multiselect wrapper SelectInput.vue
<template>
<multiselect
v-model="value"
:options="options"
:placeholder="placeholder"
label="label"
track-by="value"
#input="inputChanged" />
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
components: { Multiselect },
props: {
options: {
type: [Array],
default() {
return [];
}
},
savedValue: {
type: [Array],
default() {
return [];
}
},
placeholder: {
type: [String],
default: 'Select Option...'
}
},
data() {
return {
value: null
};
},
mounted() {
this.value = this.savedValue;
},
methods: {
inputChanged(selected) {
this.$emit('selected', selected.value);
}
}
};
</script>
<style scoped>
#import '../../../../../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
</style>
Now you can insure you are manging the lifecycle of your page and what data you have when, you can wait until you get musicTypeOptions before it will be passed to SelectInput component which will in turn set up Multiselect or any other component and then handle passing the data back via this.$emit('hihiwhatever') which gets picked up by #hihiwhatever on the component in the template which calls back to a function and now you are on your way to do whatever with the new selection and pass different data to SelectInput and MultiSelect will stay in sync always.
Now for my last advice, from experience. Resist the temptation because you read about it 650 times a day and it seems like the right thing to do and use Vuex in a setup like this. You have PHP and a database already, use it just like Vuex would be used if you were making is in Node.js, which you are not you have a perfectly awesome PHP server side storage, trying to manage data in Vuex on the front end, while also having data managed by PHP and database server side is going to end in disaster as soon as you start having multiple users logged in messing with the Vuex data, which came from PHP server side you will not be able to keep a single point of truth. If you don't have a server side DB yes Vuex it up, but save yourself a headache and wait to try it until you are using Node.js 100%.
If you want to manage some data client side longer than the lifecycle of a page view use something like https://github.com/gruns/ImmortalDB it has served me very well.
Sorry this turned into a blog post haha, but I hope it helps someone save themselves a few weeks.