I have a Request Form Component, and within this request form Component I have a Dropdown Menu Component, which I will link both below. All values in my table are pushed into an object upon hitting the Submit Button. However my dropdown selection is only being picked up by my console.log and not being pushed into the Object.
I'm not so familiar with Vue, so I'm not sure what direction to go in for fixing this. I'll attach the relevant (?) pieces of code below.
Parent Component:
<SelectComponent :selected="this.selected" #change="updateSelectedValue" />
export default {
fullScreen: true,
name: 'CcRequestForm',
mixins: [BaseForm],
name: "App",
components: {
SelectComponent,
},
data() {
return {
selected: "A",
};
},
props: {
modelName: {
default: 'CcRequest',
},
parentId: {
type: Number,
default: null,
},
},
mounted() {
this.formFields.requester.value = this.currentRequesterSlug;
},
destroyed() {
if (!this.modelId) return;
let request = this.currentCcRequest;
request.params = request.params.filter(p => p.id)
},
computed: {
...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),
ccTypesCollection() {
return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
}
},
methods: {
addParam() {
this.addFormFields(['params'], {
slug: '',
name: '',
isRequired: true,
description: '',
typeSlug: '',
selected: ''
});
},
deleteParam(idx){
this.removeFormFields(['params', idx]);
},
restoreParam(idx){
this.restoreFormFields(['params', idx])
},
$newObject() {
return {
slug: '',
name: '',
isAbstract: false,
requester: '',
description: '',
status: 'inactive',
params: [],
selected: ''
};
},
$extraPrams() {
return {
parentId: this.parentId,
};
},
updateSelectedValue: function (newValue) {
this.selected = newValue;
},
},
watch: {
selected: function (val) {
console.log("value changed", val);
},
},
};
Child Component:
<script>
export default {
name: "SelectComponent",
props: {
selected: String,
},
computed: {
mutableItem: {
get: function () {
return this.selected;
},
set: function (newValue) {
this.$emit("change", newValue);
},
},
},
};
You have to define the emit property in the parent component, or else it won't know what to expect. That would look like:
<SelectComponent :selected="this.selected" #update-selected-value="updateSelectedValue" />
Check out this tutorial for more information: https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation
To update selected property inside the object, in this constellation, you need to update object property manually upon receiving an event, inside of updateSelectedValue method. Other way could be creating a computed property, since it's reactive, wrapping "selected" property.
computed: {
selectedValue () {
return this.selected
}
}
And inside of object, use selectedValue instead of selected:
return {
...
selected: selectedValue
}
Related
I'm passing an array of objects into a child component and I want to access this array into the created function of the child component.
When logging the entire this.$props object I'm getting all the data however when I'm logging the array I'm getting an empty proxy object.
Parent component
<script>
import SelectWithSearch from '#/components/formElements/SelectWithSearch.vue';
import AddressService from '#/services/AddressService';
export default {
data() {
return {
city: 312,
cityOptions: [],
};
},
components: { SelectWithSearch },
created() {
this.getCities();
},
methods: {
async getCities() {
const response = await AddressService.getCities();
this.cityOptions = response.data.cities.map((city) => {
return {
id: city.id,
display_name: `${city.sub_city} (${city.zip})`,
};
});
},
},
};
</script>
Child component (SelectWithSearch)
<script>
export default {
props: {
label: { type: String, required: false },
options: { type: Array, required: true },
},
created() {
console.log(this.$props);
console.log(this.$props.options);
console.log(this.options);
console.log(this.label);
},
Output
How can I access the options data in the created function?
In Vue JS3, my Vue component, I can pass props like this: Parent:
<script>
export default {
data() {
return {
links: [],
};
},
methods: {
editLink(el) {
this.$router.push({
name: "EditLink",
params: {
id: el.id,
short_link: el.short_link,
long_link: el.long_link,
},
});
},
},
};
</script>
Component:
<script>
export default {
props: ["elem"],
data() {
return {
link: {},
};
},
mounted() {
this.link = {
id: this.$route.params.id,
short_link: this.$route.params.short_link,
long_link: this.$route.params.long_link,
};
},
};
</script>
But If I pass the Object named el directly like this:
this.$router.push({
name: "EditLink",
params: {
elem: el,
},
});
When I try to print it out, I get the value of elem as [Object Object], instead of an actual object. Why is this happening? What's the solution?
Try out to spread the el instead of assigning each value to the respective key :
this.$router.push({
name: "EditLink",
params: {...el},
});
then in the target page :
mounted() {
this.link = {...this.$route.params};
},
I have a parent component that sends tabs selected by the user to the
child component
I want to watch the value passed by the parent
component in the child component
I am sure that the value of tabs
will change according to the parent component selection
In this code, console isn't work
child component
props: {
tab: ''
},
data: function () {
return
tabs: this.tab,
};
},
watch: {
tabs: function () {
console.log('tabs', this.tabs);
},
},
parent component
<table
:tab="0">
</table>
in
data: function () {
return
tabs: this.tab,
};
},
the tabs property takes only the initial value, I recommend to use a computed property instead of data :
props: {
tab: ''
},
computed:{
tabs(){
return this.tab;
}
},
watch: {
tabs: function () {
console.log('tabs', this.tabs);
},
},
or you could watch the prop directly :
props: {
tab: ''
},
watch: {
tab: function () {
console.log('tab', this.tab);
},
},
Note that you shouldn't use HTML native elements as vue component like table
if the prop is an object or an array you should add deep option like :
props: {
tab: ''
},
computed:{
tabs(){
return this.tab;
}
},
watch: {
tabs:{
handler: function () {
console.log('tabs', this.tabs);
},
deep:true
}
},
An alternate approach
props: {
tab: {
type: Number,
default: 0
}
},
data() {
return {
tabs: this.tab,
};
},
watch: {
tab(newVal) {
this.tabs = newVal;
console.log('tabs', newVal);
},
},
I try to extend the product detail page and get the productId out of the routes.
Shopware.Module.register('sw-product-content-element', {
routeMiddleware(next, currentRoute) {
if (currentRoute.name === 'sw.product.detail') {
currentRoute.children.push({
name: 'sw.product.detail.content-element',
path: '/sw/product/detail/:id/content-element',
component: 'sw-product-detail-content-element',
meta: {
parentPath: "sw.product.index"
},
props: {
default(route) {
console.log(route)
return {
productId: route.params.id
};
}
}
});
}
next(currentRoute);
}
});
I try to pass my productId as props to my component, but in my component productId is undefined.
Component.register('sw-product-detail-content-element', {
template,
props: {
productId: {
required: true,
type: String
},
},
data() {
return {
product: null
};
},
created() {
console.log(this.productId)
},
....
I found a solution. I do not need to pass my value as props, I can just use this.$route.params.id
Component.register('sw-product-detail-content-element', {
template,
props: {
productId: {
required: true,
type: String
},
},
data() {
return {
product: null
};
},
created() {
this.productId = this.$route.params.id
console.log(this.productId)
},
....
The value of this.$store.state.Auth.loginToken is modified by one of its child components. The initial value of this.$store.state.Auth.loginToken is undefined. But still, the update in its value has no effect in the cached value of navItems thus it always returns the second value.
computed: {
navItems () {
return this.$store.state.Auth.loginToken != undefined ?
this.items.concat([
{ icon: 'add', title: 'Add new journal entry', to: '/' },
{ icon: 'power_settings_new', title: 'Logout', to: '/logout'}
]) :
this.items.concat([
{ icon: 'play_arrow', title: 'Login', to: '/login' }
])
}
}
Is there a better way to keep a watch on this.$store.state.Auth.loginToken so that it can be used same as navItems?
I created a basic example of how you can use vuex getters and Auth token (codepen):
const mapGetters = Vuex.mapGetters;
var store = new Vuex.Store({
state: {
Auth: {
loginToken: ''
},
menuItems: [
{ icon: 'home', title: 'Home', to: '/' },
{ icon: 'about', title: 'About', to: '/about' },
{ icon: 'contact', title: 'Contact', to: '/contact' }
]
},
mutations: {
SET_LOGIN_TOKEN(state, data) {
state.Auth.loginToken = 1
}
},
getters: {
menuItems(state, getters) {
if(state.Auth.loginToken !== '') {
return state.menuItems.concat([{
icon: 'profile', title: 'Profile', to: '/profile'
}])
}
return state.menuItems
},
loggedIn(state) {
return state.Auth.loginToken !== ''
}
},
actions: {
doLogin({commit}) {
commit('SET_LOGIN_TOKEN', 1)
}
}
});
new Vue({
el: '#app',
store,
data: function() {
return {
newTodoText: "",
doneFilter: false
}
},
methods: {
login() {
this.$store.dispatch('doLogin')
}
},
computed: {
...mapGetters(['menuItems', 'loggedIn'])
}
})
This is just an example so you can ignore the actual login action. Also, the store should be a directory, the getters, mutations and actions should have their own files which are then imported in the index.js in the store like in this example