Develop Reference

uuid for v-for key with vue-uuid?

I'm trying to use a random string (UUID v4) with vue-uuid for current items and items added to the list in the future (this is a to-do list type app) but I'm not sure what to correct syntax is.
I installed it and added it to my project in main.js:
import UUID from 'vue-uuid';
Vue.use(UUID);
However, I don't know how to use it in my Vue component. This is what I tried:
Template:
<transition-group
name="list"
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<li v-for="item in skills" :key="uuid">{{ item.skill }}</li>
</transition-group>
Script:
import { uuid } from 'vue-uuid';
export default {
name: 'Skills',
data() {
return {
uuid: uuid.v4(),
skill: '',
skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
};
},
};
For :key="uuid", I get an error saying Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive (vue/valid-v-for). I also tried changing it to :key="item.uuid" which makes that error go away, but then the list doesn't appear.
project repo (based on this Udemy Vue crash course)

Try this:
<template>
<div id="app">
<p :key="item.uuid" v-for="item in skills">{{ item.skill }}</p>
</div>
</template>
<script>
import { uuid } from "vue-uuid";
export default {
name: "App",
data() {
return {
skills: [
{ uuid: uuid.v4(), skill: "Vue.js" },
{ uuid: uuid.v4(), skill: "React" }
]
};
}
};
</script>
This is a working demo: https://codesandbox.io/s/nifty-sutherland-b0k9q
UPDATED
to be dynamic
There are two moments that you could add the uuid to each element in the skills array:
1 When adding a new skill:
addSkill() {
this.$validator.validateAll().then(result => {
if (result) {
this.skills.push({ uuid: uuid.v4(), skill: this.skill });
this.skill = "";
}
});
}
2 When rendering them, in this case, you might use a computed property like so:
import { uuid } from 'vue-uuid';
export default {
name: 'Skills',
data () {
return {
skill: '',
skills: [{ skill: 'Vue.js' }, { skill: 'React' }]
};
},
computed: {
computedSkills () {
return this.skills.map(skill => {...skill, uuid: uuid.v4() })
}
}
};
And then using the computedSkills computed property for rendering rather than the skills property. Something like:
<li v-for="item in computedSkills" :key="item.uuid">{{ item.skill }}</li>

How to write a plugin that shows a modal popup using vue. Call should be made as a function()

I am trying to make a VueJS plugin that exports a global method, which when called, will popup a message with an input text field. Ideally, I want to be able to make the following call from any Vue component:
this.$disaplayMessageWithInput("Title","Body","Value");
And a popup should come on the screen.
I've tried building it but when the install() calls this.$ref., it isn't recognized:
DeleteConfirmation.vue
<template>
<b-modal size="lg" ref="deleteConfirmationModal" :title="this.title" header-bg-variant="danger" #ok="confirmDelete" #cancel="confirmCancel">
<p>
{{this.body}}
</p>
</b-modal>
</template>
<script>
export default {
data()
{
return {
title: null,
body: null,
valueCheck: null,
value: null
};
},
install(vue, options)
{
Vue.prototype.$deleteConfirmation = function(title, body, expectedValue)
{
this.title = title;
this.body = body;
this.valueCheck = expectedValue;
this.$refs.$deleteConfirmation.show()
}
},
}
</script>
app.js
import DeleteConfirmation from './components/global/DeleteConfirmation/DeleteConfirmation';
Vue.use(DeleteConfirmation);
The call I am trying to make is:
$vm0.$deleteConfirmation("title","body","val");
I get the below error at the run time:
app.js?id=c27b2799e01554aae7e1:33 Uncaught TypeError: Cannot read property 'show' of undefined
at Vue.$deleteConfirmation (app.js?id=c27b2799e01554aae7e1:33)
at <anonymous>:1:6
Vue.$deleteConfirmation # app.js?id=c27b2799e01554aae7e1:33
(anonymous) # VM1481:1
It looks like, this.$refs in DeleteConfirmation.vue is undefined.

Try to avoiding $ref with vue ( $ref is here for third party and some very special case )
$ref isn't reactive and is populate after the render ...
the best solution for me is using a event bus like this :
const EventBus = new Vue({
name: 'EventBus',
});
Vue.set(Vue.prototype, '$bus', EventBus);
And then use the event bus for calling function of your modal ...
(
this.$bus.on('event-name', callback) / this.$bus.off('event-name');
this.$bus.$emit('event-name', payload);
)
You can create a little wrapper around the bootstrap modal like mine
( exept a use the sweet-modal)
<template>
<div>
<sweet-modal
:ref="modalUid"
:title="title"
:width="width"
:class="klass"
class="modal-form"
#open="onModalOpen"
#close="onModalClose"
>
<slot />
</sweet-modal>
</div>
</template>
<script>
export default {
name: 'TModal',
props: {
eventId: {
type: String,
default: null,
},
title: {
type: String,
default: null,
},
width: {
type: String,
default: null,
},
klass: {
type: String,
default: '',
},
},
computed: {
modalUid() {
return `${this._uid}_modal`; // eslint-disable-line no-underscore-dangle
},
modalRef() {
return this.$refs[this.modalUid];
},
},
mounted() {
if (this.eventId !== null) {
this.$bus.$on([this.eventName('open'), this.eventName('close')], this.catchModalArguments);
this.$bus.$on(this.eventName('open'), this.modalRef ? this.modalRef.open : this._.noop);
this.$bus.$on(this.eventName('close'), this.modalRef ? this.modalRef.close : this._.noop);
}
},
beforeDestroy() {
if (this.eventId !== null) {
this.$off([this.eventName('open'), this.eventName('close')]);
}
},
methods: {
onModalOpen() {
this.$bus.$emit(this.eventName('opened'), ...this.modalRef.args);
},
onModalClose() {
if (this.modalRef.is_open) {
this.$bus.$emit(this.eventName('closed'), ...this.modalRef.args);
}
},
eventName(action) {
return `t-event.t-modal.${this.eventId}.${action}`;
},
catchModalArguments(...args) {
if (this.modalRef) {
this.modalRef.args = args || [];
}
},
},
};
</script>
<style lang="scss" scoped>
/deep/ .sweet-modal {
.sweet-title > h2 {
line-height: 64px !important;
margin: 0 !important;
}
}
</style>

AppModal.vue
<template>
<div class="modal-wrapper" v-if="visible">
<h2>{{ title }}</h2>
<p>{{ text }}</p>
<div class="modal-buttons">
<button class="modal-button" #click="hide">Close</button>
<button class="modal-button" #click="confirm">Confirm</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
title: '',
text: ''
}
},
methods: {
hide() {
this.visible = false;
},
}
}
</script>
Modal.js (plugin)
import AppModal from 'AppModal.vue'
const Modal = {
install(Vue, options) {
this.EventBus = new Vue()
Vue.component('app-modal', AppModal)
Vue.prototype.$modal = {
show(params) {
Modal.EventBus.$emit('show', params)
}
}
}
}
export default Modal
main.js
import Modal from 'plugin.js'
// ...
Vue.use(Modal)
App.vue
<template>
<div id="app">
// ...
<app-modal/>
</div>
</template>

This looks pretty complicated. Why don't you use a ready-to-use popup component like this one? https://www.npmjs.com/package/#soldeplata/popper-vue

Deep copy of a Javascript object is not working as expected in Vue.js

I am passing a clone of an object from a parent component to a child component using props, but when I change the value of the status property in the object of the parent component the child component gets notified and chenges the value of the status property in the "cloned" object.
I've read about Object.assign() method and that it only does shallow copying but the strange thing is that my object properties are of primitive type String meaning they should be copied by value not by reference, I even tried assigning the values manually and tried the JSON way as demonstrated below but nothing works as I expected.
Parent Component: AppServers
<template>
<div>
<AppServerStatus v-for="server in servers" :serverObj="JSON.parse(JSON.stringify(server))">
</AppServerStatus>
<hr>
<button #click="changeStatus()">Change server 2</button>
</div>
</template>
<script>
import AppServerStatus from './AppServerStatus';
export default {
name: "AppServers",
components: {
AppServerStatus
},
data() {
return {
servers: [
{
name: 'server1',
status: 'Critical'
},
{
name: 'server2',
status: 'Normal'
},
{
name: 'server3',
status: 'abnormal'
},
{
name: 'server4',
status: 'idle'
},
{
name: 'server5',
status: 'Good'
},
],
serverTmp: {}
}
},
methods: {
changeStatus(){
this.servers[1].status = 'Active';
}
}
}
</script>
Child Component: AppServerStatus
<template>
<div>
<h3>Server Name: {{ serverObj.name }}</h3>
<p>Server Status: {{ serverObj.status }}</p>
<hr>
</div>
</template>
<script>
export default {
name: "AppServerStatus",
data() {
return {
status: 'Critical'
}
},
props: [
'serverObj'
]
}
</script>
I expect the value of status property in the object of the child component to stay Normal when I execute changeStatus() in the parent component but it changes also.

Create a new object from the serverObj prop on created or mounted to prevent unwanted reactivity.
<template>
<div>
<h3>Server Name: {{ server.name }}</h3>
<p>Server Status: {{ server.status }}</p>
<hr>
</div>
</template>
<script>
export default {
name: 'AppServerStatus',
data() {
return {
status: 'Critical',
server: {
name: '',
status: ''
}
}
},
props: [
'serverObj'
],
mounted() {
this.server = {
name: this.serverObj.name,
status: this.serverObj.status
};
}
}
</script>

VueJS pass default prop without reference to child component

I've stumbled upon this situation where I want to pass a prop to a child component that will be the default value of the component, but it will only be showed when the initial value is empty.
Parent Component:
<multi-line-input v-model="data.something" placeholder="Enter Something" :default="data.something"/>
Child Component
props: {
value: {
type: String,
default: ''
},
default: {
type: String,
default: ''
},
},
methods: {
emitBlur (e) {
if (!this.value && this.default) {
this.value = this.default
}
this.$emit('blur')
},
emitInput () {
this.$emit('input', this.$el.value)
}
}
So what I am trying to achieve basically, is when the component loads will get the value from v-model it will also receive a default value that shouldn't change, and only used as a value when the actual value is empty on blur
The default will have the initial value of data.something and it should not change!
I tried to get rid of the reference using JSON.parse(JSON.stringify(this.value)) but it doesn't seem to work either!

So if I understand your question correctly, you want this behavior: upon the blur event on your <multi-line-input> component, if the value of the input is empty, then set the value to a default value which is specified by the parent (through a prop).
First of all, it is an error to do this.value = ... in your component. You must not modify props, props pass data from parent to child only, the data passed through props is not yours to modify directly from within the component.
Try something like this:
Vue.component('multi-line-input', {
template: '<input #blur="onBlur" #input="onInput" :value="value">',
props: {
value: {
type: String,
default: '',
},
default: {
type: String,
default: '',
},
},
methods: {
onBlur() {
if (!this.value && this.default) {
this.$emit('input', this.default);
}
},
onInput(e) {
this.$emit('input', e.target.value);
},
},
});
new Vue({
el: '#app',
data: {
user: null,
initialUser: null,
},
created() {
// Pretend that I'm pulling this data from some API
this.user = {
name: 'Fred',
email: 'fred#email.com',
address: '123 Fake St',
};
// Make a copy of the data for the purpose of assigning the
// default prop of each input
this.initialUser = _.cloneDeep(this.user);
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="app">
<template v-if="user">
<multi-line-input v-model="user.name" :default="initialUser.name"></multi-line-input>
<multi-line-input v-model="user.email" :default="initialUser.email"></multi-line-input>
<multi-line-input v-model="user.address" :default="initialUser.address"></multi-line-input>
</template>
</div>
Or, if you want the default value to be determined by the component instead of the parent (through a prop), you can do something like this instead:
Vue.component('multi-line-input', {
template: '<input #blur="onBlur" #input="onInput" :value="value">',
props: {
value: {
type: String,
default: '',
},
},
created() {
this.def = this.value;
},
methods: {
onBlur() {
if (!this.value && this.def) {
this.$emit('input', this.def);
}
},
onInput(e) {
this.$emit('input', e.target.value);
},
},
});
new Vue({
el: '#app',
data: {
user: null,
},
created() {
// Pretend that I'm pulling this data from some API
this.user = {
name: 'Fred',
email: 'fred#email.com',
address: '123 Fake St',
};
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="app">
<template v-if="user">
<multi-line-input v-model="user.name"></multi-line-input>
<multi-line-input v-model="user.email"></multi-line-input>
<multi-line-input v-model="user.address"></multi-line-input>
</template>
</div>
However I do not recommend the second approach because the child component instance will only every have one default value for its entire lifetime. Vue reuses component instances whenever possible, so it wouldn't work if Vue were to bind it to a different parent component (how/when would it update its own default state?).

Vue JS Component V-Model $emit

I am using Vue JS 2 with Laravel 5.5. When I use a component and pass back the v-model within an $emit and then look to use the data on it's parent it returns 'undefined' in production. However if I use on my local dev environment it works fine?
The idea is that I can collect the data from the text editor and then store when saving the content.
I've tried "npm run development"
My component
<template>
<div>
<ckeditor
v-model="editorInfo.content"
:config="config"
#blur="onBlur($event)">
</ckeditor>
</div>
</template>
<script>
import Ckeditor from 'vue-ckeditor2';
export default {
components: { Ckeditor },
props: {
type: '',
content: ''
},
data () {
return {
content: '',
editorInfo: {
type: '',
content: this.content
},
config: {
height: 300,
}
}
},
methods: {
onBlur (editor) {
this.editorInfo.type = this.type;
this.$emit('update',this.editorInfo);
}
}
}
</script>
My Parent
import MyCkeditor from './../components/MyCkeditor';
new Vue({
el: '#vue',
components: { MyCkeditor },
data: {
category: {
title: '',
description: '',
extra_content: '',
}
}
methods: {
Update(value){
console.log(value);
if(value.type == 'description'){
this.category.description = value.content;
} else {
this.category.extra_content = value.content;
}
}
},
})
My HTML
<div class="form-group">
<label>Description</label>
<my-ckeditor :type="'description'" v-on:update="Update"></my-ckeditor>
</div>