I have children and spouse data array in employee array. Whenever I delete children array the employee data is not reactive.
You need to use this.$set property to make it reactive. Please look into advanced vue js reactivity concepts.
Related
I'm making a Form wrapper and I'm wondering how to handle data object prop.
From what I have seen out there, there are some (like FormKit) that mutate the prop object that holds the data. This is not a recommended way according to the official docs. Then there are those (like VueFormulate) that create a shallow copy of the data object before emiting the changed object. To support nested data object you need to deep copy the data object on every change. This seems wasteful with large forms.
Is there an alternative where you don't deep copy an object and you don't mutate object prop?
You could possibly use v-model. as the docs will say, it's shorthand for the child component having a property bound from the parent and when a change event occurs you emit an update event from the child to the parent to have the parent update the property, and the child will subsequently sync to the new value.
ie:
childComponent *has value change*
onChange (value) => this.$emit("updateValue", value)
parentComponent *recieved "updateValue" event*
onUpdateValue(value) => this.parentValue = value
The situation is like this. There is an array of object called tableData storing table rows, which is now stored in vuex
The component structure is like this:
Parent (page) -> child 1 (tableLayout)-> child 2 (tableBody)-> child 3 (row)
In child 3, there is a delete function to remove an index in tableData.
The parent needs to update its data (selectedRow) which will be passed to another unrelated child component if the id of the row deleted is the selectedRow Id.
Currently I am using watch to watch tableData to react to the change in parent component. However, the watch function will always loop over tableData to find if selectedRow still exist whenever tableData is updated, which is quite undesirable when the array is huge.
I thought of using emit but it will have to go through 2 components to reach the parent, making the code hard to manage
I also thought of using bus, but its not a good practice as well.
Can anyone give me any suggestion on this issue?
You can store the selectedRow in vuex then in child3 update selectedRow in your vuex store
Since you have stored the tableData in vuex... you can achieve this using mutation
From your child2 component you can just call a mutation to remove the particular index from tableData
for example
this.$store.commit('removeIndex', payload) // where removeIndex is a mutation handler and payload is the index value sent as argument
I have got a rather large template at the moment for my component. I want to separate aspects of this into it's own component.
However i'm struggling to pass data to this component. I still want to be able to manipulate the data within the child and have the data in the parent update. So for example if I pass in an object, and then use v-model within the child on a textbox, the changes should reflex within the parent.
So, i'd assume as I loop through the list of objects I would v-model them into my child component, like so:
Main.vue
<card v-for="quote in quotes" v-model="quote"></card>
And then of course accept the input within the new model:
Card.vue
export default {
props: [ 'input' ]
}
However i'm getting the following error and I can't really make sense of it.
You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-mode
l on an object property instead.
I am working on a web app where users can work on a project. The structure of the app is as follows:
Component A (app)
Component B1-Bn (header, footer, main window etc., children of A)
Component C1 (Input area; with inputs for the user to work on the project, child of main window)
Component C2 (Output area; canvas which shows the result based on inputs from C1. In the future also a "graphical" input area that syncs with C1. Child of main window)
Component D1-Dn (Single parts of the input area like tables, advanced input components etc. Child of C1)
Now the project that the user is working on consists of an object stored in Component A. Component Dn needs to write to the object in Component A and also C2 in the future.
I can't get the v-model on input components Dn to work. I tried to pass the data from A down to C1 via props / v-bind and then in Dn, I v-model the prop from C1 (which originates from A) to the input-field. I also tried to use the sync modifier without sucess.
I seem to have a lack of understanding of the vue logic. I come from a desktop background where you just define the scope of variables.
I also found that other vue apprentices have the same understanding problem but somehow the answers I found where not sufficient.
I want a "global" variable that can be edited by every component and is linked to elements in the DOM. What would be the best way to achieve this?
Declare your variable at data when creating Vue Object in your root component (Component A) like
var app = new Vue({
data: function(){
return {
showSetting: {}
}
},
})
Now you can access this showSetting variable in any component like
app.showSetting;
//change it in any component
app.showSetting = {a:1,b:2};
//or append new value to object
Object.assign({d:3},app.showSetting);
Thanks for the answers so far. I guess both of them work. I found another solution because now I fully understand how data is passed in vue:Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state. I will pass all data as arrays in the future, as I only want references. The only question that remains is why the programmer is not allowed to define by himself whether the data is passed by reference or not...
Source: Vue.js Guide
I am trying to delete a object using its key and expecting to update the component. I am using vuex.
Here is how I am trying
My object structure is something like this
115:Object
116:Object
I have the key (115, 116) so I am trying to delete them.
delete state.fixture[i]
This code delete the object but the problem is component is not updated even though state of fixture has changed now. How can I update it?
Thank you.
Use
import Vue from 'vue'
Vue.delete(state.fixture, i)
Vue.delete
Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.
The function takes an object and a key to delete from the object.
If you are interested in adding a new property to an object, check Vue.set