Develop Reference

Can't correctly pass the props to the child component in Vue 3

I want to pass data from the request via axios in the root component to the child using Vue. Unfortunately, only one field is displayed correctly - "title". But I also need to output "body".
Ps: This is my first time working with Vue, and I would like to know how it can be done correctly
App.vue
<template>
<app-news
v-for="item in news"
:key="item.id"
:title="item.title"
:id="item.id"
:body="item.body"
>
</app-news>
</template>
export default {
data () {
return {
news: []
}
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
.then((resp) =>
this.news = resp.data
)
},
provide () {
return {
title: 'List of all news:',
news: this.news
}
},
AppNews.vue
<template>
<div>
<hr/>
<p v-for="item in news" :key="item.id">{{ item.body }}</p> // Need to pass here body content of the response from json
</div>
</template>
props: {
news: [], // -> I think here the problem, I need to get the response as a prop and validate them as well, as shown below
title: {
type: String,
required: true
},
id: {
type: Number,
required: true
},
body: {
type: String,
required: true
},
}
},

So :title="item.title",:id="item.id" and :body="item.body" will be passed as props. So you don't need extra props you can directly use that variable.
<template>
<div>
{{title}} <br/> {{body}} <br/> {{id}}
</div>
</template>
props: {
title: {
type: String,
required: true
},
id: {
type: Number,
required: true
},
body: {
type: String,
required: true
},
}
},

You can try like following snippet:
const app = Vue.createApp({
data() {
return {
news: []
}
},
async mounted() {
const news = await axios
.get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
this.news = news.data
},
})
app.component('appNews', {
template: `
<div>
<hr/>
<p><b>{{ title }}<b></p>
<p>{{ body }}</p>
</div>
`,
props: {
title: {
type: String,
required: true
},
id: {
type: Number,
required: true
},
body: {
type: String,
required: true
},
}
})
app.mount('#demo')
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj+a9P3loJB+j0QmN2Y0JYQmkBBS8W+mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<app-news
v-for="item in news"
:key="item.id"
:title="item.title"
:id="item.id"
:body="item.body"
>
</app-news>
</div>

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

Nuxt Module cannot find itself

./AppGallery.vue?vue&type=style&index=0&id=0cb54319&lang=scss&scoped=true& in ./components/sub-page/AppGallery.vue
AppGalery.vue doesn't import anything
<template>
<div class="gallery" v-if="pictures">
<a v-for="(picture, index) in pictures" :key="index" class="gallery__item" :href="picture.path" data-lightbox="gallery" :data-title="picture.title">
<div class="gallery__image">
<img :src="picture.path">
</div>
<div class="gallery__description" v-if="options.showDescription">{{ picture.title }}</div>
</a>
</div>
</template>
<script>
export default {
name: 'AppGallery',
props: {
pictures: {
type: Array,
required: true,
},
options: {
type: Object,
required: false,
default() {
return {
showDescription: true,
};
},
},
},
mounted() {
//lightbox.build();
},
};
</script>
On save error changes to other file.

Vue.js passing store data as prop causes mutation warnings

I'm passing store data (Vuex) as a property of component but it's giving me mutation errors even though I'm not changing the data.
Edit: Codepen illustrating error: https://codesandbox.io/s/v8onvz427l
Input
<template>
<div>
<input type="text" class="form-control" ref="input" />
<div style="padding-top: 5px">
<button #click="create" class="btn btn-primary btn-small">Create</button>
</div>
{{ example }}
</div>
</template>
<script>
import store from "#/store"
export default {
props: {
"example": {
}
},
data() {
return {
store
}
},
methods: {
create() {
store.commit("general_set_creation_name", {name: this.$refs.input.value})
}
}
}
</script>
Modal.vue
<template src="./Modal.html"></template>
<script>
import $ from 'jquery'
import store from '#/store'
export default {
props: {
"id": String,
"height": {
type: String,
default: "auto"
},
"width": {
type: String,
default: "40vw"
},
"position": {
type: String,
default: "absolute"
},
"component": {
default: null
},
"global": {
default: true
}
},
data () {
return {
store: store
}
},
computed: {
body () {
return store.state.General.modal.body
},
props () {
return store.state.General.modal.props
},
title () {
return store.state.General.modal.title
},
},
methods: {
close_modal (event) {
if (event.target === event.currentTarget) {
this.$refs.main.style.display = "none"
}
}
}
}
</script>
<style scoped lang="scss" src="./Modal.scss"></style>
Modal.html
<div
:id="id"
class="main"
ref="main"
#click="close_modal"
>
<div ref="content" class="content" :style="{minHeight: height, minWidth: width, position}">
<div ref="title" class="title" v-if="title">
{{ title }}
</div>
<hr v-if="title" />
<div ref="body" class="body">
<slot></slot>
<component v-if="global" :is="body" v-bind="props"></component>
</div>
</div>
</div>
Changing store data with this line in a third component:
store.commit("general_set_modal", {body: Input, title: "New "+page, props: {example: "example text 2"})

I'm quite sure you should not put a vue component on the state. If you are supposed to do that then I don't think the creators of vuex understand how an event store works.
In the documentation it also says you need to initialize your state with values and you don't do that.
Your sandbox works fine when removing the vue component from the state (state should contain data but vue components are objects with both data and behavior).
index.js in store:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
modal: {
body: {},
title: "",//det it to something
props: {}
},
creationName: null
},
mutations: {
general_set_creation_name(state, payload) {
state.creationName = payload.name;
},
general_set_modal(state, payload) {
state.modal.title = payload.title;
state.modal.props = payload.props;
console.log("we are fine here");
}
},
strict: process.env.NODE_ENV !== "production"
});

For whatever reason, changing the way I import the class removes the warning
const test = () => import('./Test')
Details:
https://forum.vuejs.org/t/getting-vuex-mutation-error-when-im-only-reading-the-data/27655/11

Reactive properties error in vue-cli

hello,
I have a few problem with vue-cli.
I try to display (in the main component) the text which are enter in the input (in the child component). it's work (so strange) but there are an error message :
vue.esm.js?efeb:578 [Vue warn]: Property or method "test" is not
defined on the instance but referenced during render. Make sure that
this property is reactive, either in the data option, or for class-
based components, by initializing the property. See:
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-
Properties.
found in
---> <Signup> at src/components/auth/Signup.vue
<App> at src/App.vue
<Root>
I search on internet and there a lot of example to resolve this error but not with the architecture vue-cli. I don't understand that...
Step by step :
I write a component :
<template>
<div class="container">
<p>{{ data.test }}</p>
<form #submit.prevent="signup">
<v-customInput v-model="test" #onChangeValue="onChange"></v-customInput>
</form>
</div>
</template>
<script>
import CustomInput from '../shared/CustomInput'
export default {
name: 'HelloWorld',
components: {
'v-customInput': CustomInput,
},
data() {
return {
data: {
test: '',
first_name: '',
last_name: '',
email: '',
password: '',
vat: 0,
creation_company_date: new Date(),
phone: '',
},
error: false,
};
},
methods: {
onChange(variable) {
const data = this.data;
for (let value in data) {
if (value === 'test') {
data[value] = variable;
}
}
}
},
};
</script>
and a child Components :
<template>
<div class="customInput">
<input v-model="value" type="text">
<label>First Name</label>
<script>
export default {
name: 'CustomInput',
data() {
return {
value: '',
};
},
watch: {
value: function(val, oldVal) {
this.$emit('onChangeValue', this.value);
}
},
};
</script>

In vue-2.x, if you bind a property using v-model and that property doesn't exist (test in this case), then you will get the error.
Try this: added test property.
<template>
<div class="container">
<p>{{ data.test }}</p>
<form #submit.prevent="signup">
<v-customInput v-model="test" #onChangeValue="onChange"></v-customInput>
</form>
</div>
</template>
<script>
import CustomInput from '../shared/CustomInput'
export default {
name: 'HelloWorld',
components: {
'v-customInput': CustomInput,
},
data() {
return {
test: '', // <===== initialize test with a default value
data: {
test: '',
first_name: '',
last_name: '',
email: '',
password: '',
vat: 0,
creation_company_date: new Date(),
phone: '',
},
error: false,
};
},
methods: {
onChange(variable) {
const data = this.data;
for (let value in data) {
if (value === 'test') {
data[value] = variable;
}
}
}
},
};
</script>