I have the below child component. The props are updated from an input selector in the parent. Why does level: this.globalForm.level not update the child's level
Parent:
<template>
<div>
<div class="form-container">
<select class="form-control" v-model="level">
<option v-for="level in options" v-bind:key="level">{{ level }}</option>
</select>
<button #click="submit()">Create</button>
</div>
<child v-bind:globalForm="globalForm"/>
</div>
</template>
<script>
inputFiled;
export default {
data() {
return {
level: "",
globalForm: {
level: ""
},
options: ["level1", "level2", "level3"]
};
},
components: {
child
},
methods: {
submit() {
this.globalForm.level = this.level;
}
},
watch: {
level() {
this.globalForm.level = this.level;
}
}
};
</script>
Child:
<template>
<div class="form-container">
<option v-for="level in options" v-bind:key="level">{{ level }}</option>
</div>
</template>
<script>
export default {
props: { globalForm: Object },
data() {
return {
options: ["level1","level2","level3",],
level: this.globalForm.level //this does not update the child's level component
};
}
};
</script>
TLDR
level should be a computed property on the child so that you can detect changes in the prop. You are setting level in the data function, so updates to the prop never make it to level.
Below you'll find a minimal example on what I think you want to achieve.
Vue.config.productionTip = false;
Vue.component('parent', {
template: `
<div class="parent">
<b>PARENT</b>
<div class="form-container">
<select class="form-control" v-model="level">
<option v-for="level in options" v-bind:key="level">{{ level }}</option>
</select>
<button #click="submit()">Create</button>
</div>
<child v-bind:globalForm="globalForm"/>
</div>
`,
data: () => ({
level: "",
globalForm: {
level: ""
},
options: ["level1", "level2", "level3"]
}),
methods: {
submit() {
this.globalForm.level = this.level;
}
}
});
Vue.component('child', {
template: `
<div class="form-container child">
<p><b>Child</b></p>
Level: {{ level }}
</div>
`,
props: {
globalForm: Object
},
computed: {
level() {
return this.globalForm.level;
}
}
});
new Vue({
el: "#app"
})
.parent {
background-color: darkgray;
padding: .5em;
border: solid 1px black;
}
.child {
background-color: lightgray;
padding: .5em;
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<parent></parent>
</div>
More Detailed explanation
There are couple of errors on your code that I'll go through.
In your child component
When initializing your component, this is not available inside the data function, so this.globalForm will be undefined. An error is thrown in the console when reproducing it.
data() {
return {
options: ["level1","level2","level3",], // this looks like duplicated code from the parent
level: this.globalForm.level // throws error
};
}
To fix that error, you can get the vm context from the parameters of data But this is not the solution for your question.
data(vm) { // note vm
return {
level: vm.globalForm.level // note vm
};
}
The real problem is that level: this.globalForm.level runs only once, in your component initialization, so level is undefined. When the globalForm prop changes, level has already been initialized and it will not change (data returns a new object so the reference to the prop is lost).
You want convert level to be a computed property so that changes to the prop can be detected and the inner value returned. See code snippet above.
Related
I have two components: child Dog and parent App. Inside the App I'm trying to change Dog's properties hasName and name on button click. However I get an error: hasName is undefined.
Child component:
Dog.vue
<template>
<div>
<div>A Dog</div>
<div v-if="hasName">Name: {{ name }}</div>
</div>
</template>
<script>
export default {
data: function () {
return {
hasName: false,
name: "",
};
},
};
</script>
Parent component:
App.vue
<template>
<div id = "app">
<img alt="Vue logo" src="./assets/logo.png" />
<Dog />
<button #click="handleClick">Click</button>
</div>
</template>
<script>
import Dog from "./components/Dog.vue";
export default {
name: "App",
components: {
Dog,
},
methods: {
handleClick: function () {
this.Dog.hasName = true;
this.Dog.name = "Jerry";
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I get the error:
Cannot set property 'hasName' of undefined
Vue fiddle: https://codesandbox.io/s/upbeat-resonance-b65pd?file=/src/App.vue
You can't access the data of a child component like this.
In your App.vue component, when you access Dog, it's simply a reference to the component itself, not a reference to any mounted version of the component.
Imagine how if you had multiple dog components. How would you be able to tell the component data apart?
You need to use props to pass data from a parent to a child.
For example:
App.vue
<template>
<div id = "app">
<img alt="Vue logo" src="./assets/logo.png" />
<Dog :name="dog.name" :has-name="dog.hasName" />
<button #click="handleClick">Click</button>
</div>
</template>
import Dog from "./components/Dog.vue";
export default {
name: "App",
data() {
return {
dog: {
hasName: false,
name: '',
},
}
},
components: {
Dog,
},
methods: {
handleClick: function () {
this.dog.hasName = true;
this.dog.name = "Jerry";
},
},
};
Dog.vue
<template>
<div>
<div>A Dog</div>
<div v-if="hasName">Name: {{ name }}</div>
</div>
</template>
<script>
export default {
props: {
hasName: {
required: true,
type: Boolean,
},
name: {
required: true,
type: String,
},
},
};
</script>
When you modify the parent object dog, the data is automatically passed to the child via props and updated there too.
Please read the VueJS docs here to learn more about props
You need to emit your event listening actions.hasName is not a data object hence it wont be defined
I have 2 components, both sharing a common parent. I want to be able to pass data from one child component to the other. (I am using vueJS 2)
The communication should be handled by the parent component as follows:
Child 1 sends the data to parent
this.$emit('myVarChanged', this.myVar);
The parent listens to the emits from the last, saves the new value, and pass it to the second child:
<ChildOneComponent #myVarChanged="updateMyVar" />
data() { return { myVar:null } }
methods: {
updateMyVar(val){
this.myVar = val;
}
}
<ChildTwoComponent :myVar="myVar" />
Child 2 gets the new value as props:
props: ['myVar']
Demo:
const child1 = Vue.component('child1', {
template: '#child1',
data() { return { count:0 } },
methods: {
updateParent() { this.$emit('myvarchanged', this.count++); }
}
});
const child2 = Vue.component('child2', {
template: '#child2',
props: ['myvar']
});
new Vue({
el:"#app",
components: { child1, child2 },
data() { return { myvar:null } },
methods: {
updateMyVar(val) { this.myvar = val; }
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="child1">
<div>
<h1>Child 1</h1>
<button #click="updateParent">Click to send to child 2</button>
</div>
</template>
<template id="child2">
<div>
<h1>Child 2</h1>
<p>Prop from child 1: {{myvar}}</p>
</div>
</template>
<div id="app">
<div><child1 #myvarchanged="updateMyVar" /></div>
<div><child2 :myvar="myvar" /></div>
</div>
According to the documentation I should be able to use computed properties as v-model in Vue as long as I define get/set methods, but in my case it doesn't work:
export default{
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options: {
get(){
console.log('get');
return {test: false};
},
set(value){
console.log('set');
},
},
}
}
Apparently set is not called when I check/uncheck the input.
But get is called when the component is displayed...
Edit: After reading in the comments that you rely on the localstorage, I can only suggest you to take the Vuex approach and use a persistence library to handle the localstorage. (https://www.npmjs.com/package/vuex-persist)
This way, your localstorage will always be linked to your app and you don't have to mess with getItem/setItem everytime.
Looking at your approach, I assume you have your reasons to use a computed property over a data property.
The problem happens because your computed property returns an object defined nowhere but in the get handler.
Whatever you try, you won't be able to manipulate that object in the set handler.
The get and set must be linked to a common reference. A data property, as many suggested, or a source of truth in your app (a Vuex instance is a very good example).
this way, your v-model will work flawlessly with the set handler of your computed property.
Here's a working fiddle demonstrating the explanation:
With Vuex
const store = new Vuex.Store({
state: {
// your options object is predefined in the store so Vue knows about its structure already
options: {
isChecked: false
}
},
mutations: {
// the mutation handler assigning the new value
setIsCheck(state, payload) {
state.options.isChecked = payload;
}
}
});
new Vue({
store: store,
el: "#app",
computed: {
options: {
get() {
// Here we return the options object as depicted in your snippet
return this.$store.state.options;
},
set(checked) {
// Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state
this.$store.commit("setIsCheck", checked);
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
<div id="app">
<h2>isChecked: {{ options.isChecked }}</h2>
<input type="checkbox" v-model="options.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex#2.0.0"></script>
With a data property
new Vue({
el: "#app",
data: {
options: {
isChecked: false
}
},
computed: {
computedOptions: {
get() {
return this.options;
},
set(checked) {
this.options.isChecked = checked;
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
<div id="app">
<h2>isChecked: {{ computedOptions.isChecked }}</h2>
<input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Your approach is a bit special IMHO but, again, you must have your reasons to do so.
The very simple explanation here in code. computed properties are dependent on other data/reactive variables. If only when the reactive properties changed their values and if same property used to compute some other computed properties then the computed property would become reactive.
this way we must set values and get in setter and getter methods.
new Vue({
el: '#app',
data: {
message: 'Use computed property on input',
foo:0,
isChecked:true
},
computed:{
bar:{
get: function(){
return this.foo;
},
set: function(val){
this.foo = val;
}
},
check:{
get: function(){
return this.isChecked;
},
set: function(val){
this.isChecked = val;
}
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }} Text</p>
<input type="text" v-model="bar" />
{{bar}}
<br/>
<p>{{ message }} Checkbox</p>
<input type="checkbox" v-model="check" />
{{check}}
</div>
Instead of a computed getter/setter, use a local data prop, initialized to the target localStorage item; and a deep watcher (which detects changes on any subproperty) that sets localStorage upon change. This allows you to still use v-model with the local data prop, while observing changes to the object's subproperties.
Steps:
Declare a local data prop (named options) that is initialized to the current value of localStorage:
export default {
data() {
return {
options: {}
}
},
mounted() {
const myData = localStorage.getItem('my-data')
this.options = myData ? JSON.parse(myData) : {}
},
}
Declare a watch on the data prop (options), setting deep=true and handler to a function that sets localStorage with the new value:
export default {
watch: {
options: {
deep: true,
handler(options) {
localStorage.setItem('my-data', JSON.stringify(options))
}
}
},
}
demo
It seems the problem is both in the presence of options and the return value of the getter.
You could try this:
let options;
try {
options = JSON.parse(localStorage.getItem("options"));
}
catch(e) {
// default values
options = { test: true };
}
function saveOptions(updates) {
localStorage.setItem("options", JSON.stringify({ ...options, ...updates }));
}
export default{
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="test" /> test </label>
</form>`,
computed: {
test: {
get() {
console.log('get');
return options.test;
},
set(value) {
console.log('set', value);
saveOptions({ test: value });
},
},
}
}
Hope this helps.
I'm not familiar if there's a computed set method that could work here, but there's a few other approaches to solving the problem.
If you want a singular getter for mutating the data, you can use an event based method for setting the data. This method is my favorite:
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" #input="setOptions({test: !options.test})"/>
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
options: {
get() {
return this.optionsData;
},
},
},
methods: {
setOptions(options) {
this.$set(this, "optionsData", { ...this.optionsData, ...options })
}
}
}
If you're not really doing anything in the get/set you can just use the data option
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" />
</form>
`,
data() {
return {
options: {
test: false
}
}
}
}
Then there's also the option of get/set for every property
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{test}}
<input id="test" type="checkbox" v-model="test" />
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
test: {
get() {
return this.optionsData.test;
},
set(value) {
this.optionsData.test = value
}
},
},
}
The return value of Vue computed properties are not automatically made reactive. Because you are returning a plain object, and because you're assigning to a property within the computed property, the setter will not trigger.
You have two problems you need to solve, one problem's solution is to store a reactive version of your computed property value (see Vue.observable()). The next problem is a bit more nuanced, I'd need to know why you want to hook in to the setter. My best guess without more information would be that you're actually looking to perform side-effects. In that case, you should watch the value for changes (see vm.$watch()).
Here's how I'd write that component based on the assumptions above.
export default {
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options(vm) {
return (
vm._internalOptions ||
(vm._internalOptions = Vue.observable({ test: false }))
)
},
},
watch: {
"options.test"(value, previousValue) {
console.log("set")
},
},
}
If you need to trigger side-effects based on anything changing on options, You can deeply watch it. The biggest caveat though is that the object must be reactive (solved by Vue.observable() or defining it in the data option).
export default {
watch: {
options: {
handler(value, previousValue) {
console.log("set")
},
deep: true,
},
},
}
According to the documentation I should be able to use computed properties as v-model in Vue as long as I define get/set methods, but in my case it doesn't work:
export default{
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options: {
get(){
console.log('get');
return {test: false};
},
set(value){
console.log('set');
},
},
}
}
Apparently set is not called when I check/uncheck the input.
But get is called when the component is displayed...
Edit: After reading in the comments that you rely on the localstorage, I can only suggest you to take the Vuex approach and use a persistence library to handle the localstorage. (https://www.npmjs.com/package/vuex-persist)
This way, your localstorage will always be linked to your app and you don't have to mess with getItem/setItem everytime.
Looking at your approach, I assume you have your reasons to use a computed property over a data property.
The problem happens because your computed property returns an object defined nowhere but in the get handler.
Whatever you try, you won't be able to manipulate that object in the set handler.
The get and set must be linked to a common reference. A data property, as many suggested, or a source of truth in your app (a Vuex instance is a very good example).
this way, your v-model will work flawlessly with the set handler of your computed property.
Here's a working fiddle demonstrating the explanation:
With Vuex
const store = new Vuex.Store({
state: {
// your options object is predefined in the store so Vue knows about its structure already
options: {
isChecked: false
}
},
mutations: {
// the mutation handler assigning the new value
setIsCheck(state, payload) {
state.options.isChecked = payload;
}
}
});
new Vue({
store: store,
el: "#app",
computed: {
options: {
get() {
// Here we return the options object as depicted in your snippet
return this.$store.state.options;
},
set(checked) {
// Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state
this.$store.commit("setIsCheck", checked);
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
<div id="app">
<h2>isChecked: {{ options.isChecked }}</h2>
<input type="checkbox" v-model="options.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex#2.0.0"></script>
With a data property
new Vue({
el: "#app",
data: {
options: {
isChecked: false
}
},
computed: {
computedOptions: {
get() {
return this.options;
},
set(checked) {
this.options.isChecked = checked;
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
<div id="app">
<h2>isChecked: {{ computedOptions.isChecked }}</h2>
<input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Your approach is a bit special IMHO but, again, you must have your reasons to do so.
The very simple explanation here in code. computed properties are dependent on other data/reactive variables. If only when the reactive properties changed their values and if same property used to compute some other computed properties then the computed property would become reactive.
this way we must set values and get in setter and getter methods.
new Vue({
el: '#app',
data: {
message: 'Use computed property on input',
foo:0,
isChecked:true
},
computed:{
bar:{
get: function(){
return this.foo;
},
set: function(val){
this.foo = val;
}
},
check:{
get: function(){
return this.isChecked;
},
set: function(val){
this.isChecked = val;
}
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }} Text</p>
<input type="text" v-model="bar" />
{{bar}}
<br/>
<p>{{ message }} Checkbox</p>
<input type="checkbox" v-model="check" />
{{check}}
</div>
Instead of a computed getter/setter, use a local data prop, initialized to the target localStorage item; and a deep watcher (which detects changes on any subproperty) that sets localStorage upon change. This allows you to still use v-model with the local data prop, while observing changes to the object's subproperties.
Steps:
Declare a local data prop (named options) that is initialized to the current value of localStorage:
export default {
data() {
return {
options: {}
}
},
mounted() {
const myData = localStorage.getItem('my-data')
this.options = myData ? JSON.parse(myData) : {}
},
}
Declare a watch on the data prop (options), setting deep=true and handler to a function that sets localStorage with the new value:
export default {
watch: {
options: {
deep: true,
handler(options) {
localStorage.setItem('my-data', JSON.stringify(options))
}
}
},
}
demo
It seems the problem is both in the presence of options and the return value of the getter.
You could try this:
let options;
try {
options = JSON.parse(localStorage.getItem("options"));
}
catch(e) {
// default values
options = { test: true };
}
function saveOptions(updates) {
localStorage.setItem("options", JSON.stringify({ ...options, ...updates }));
}
export default{
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="test" /> test </label>
</form>`,
computed: {
test: {
get() {
console.log('get');
return options.test;
},
set(value) {
console.log('set', value);
saveOptions({ test: value });
},
},
}
}
Hope this helps.
I'm not familiar if there's a computed set method that could work here, but there's a few other approaches to solving the problem.
If you want a singular getter for mutating the data, you can use an event based method for setting the data. This method is my favorite:
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" #input="setOptions({test: !options.test})"/>
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
options: {
get() {
return this.optionsData;
},
},
},
methods: {
setOptions(options) {
this.$set(this, "optionsData", { ...this.optionsData, ...options })
}
}
}
If you're not really doing anything in the get/set you can just use the data option
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{options.test}}
<input id="test" type="checkbox" v-model="options.test" />
</form>
`,
data() {
return {
options: {
test: false
}
}
}
}
Then there's also the option of get/set for every property
export default {
template: `
<form class="add-upload" #submit.prevent="">
<label for="test"> test </label>
{{test}}
<input id="test" type="checkbox" v-model="test" />
</form>
`,
data() {
return {
optionsData: {
test: false
}
}
},
computed: {
test: {
get() {
return this.optionsData.test;
},
set(value) {
this.optionsData.test = value
}
},
},
}
The return value of Vue computed properties are not automatically made reactive. Because you are returning a plain object, and because you're assigning to a property within the computed property, the setter will not trigger.
You have two problems you need to solve, one problem's solution is to store a reactive version of your computed property value (see Vue.observable()). The next problem is a bit more nuanced, I'd need to know why you want to hook in to the setter. My best guess without more information would be that you're actually looking to perform side-effects. In that case, you should watch the value for changes (see vm.$watch()).
Here's how I'd write that component based on the assumptions above.
export default {
template: `
<form class="add-upload" #submit.prevent="return false">
<label><input type="checkbox" v-model="options.test" /> test </label>
</form>
`,
computed: {
options(vm) {
return (
vm._internalOptions ||
(vm._internalOptions = Vue.observable({ test: false }))
)
},
},
watch: {
"options.test"(value, previousValue) {
console.log("set")
},
},
}
If you need to trigger side-effects based on anything changing on options, You can deeply watch it. The biggest caveat though is that the object must be reactive (solved by Vue.observable() or defining it in the data option).
export default {
watch: {
options: {
handler(value, previousValue) {
console.log("set")
},
deep: true,
},
},
}
I have two files named Recursive.vue and Value.vue.
In the first instance Recursive is the parent. Mounting Recursive in Recursive goes great, same for mounting Value in Recursive and after that Value in Value.
But when I've mounted Value in Recursive and trying to mount Recursive in Value after that I get the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
(found in component <recursive>)
How can I make my problem work?
This is what my files are looking like:
Recursive
<template>
<div class="recursive">
<h1 #click="toggle">{{comps}}</h1>
<div v-if="isEven">
Hello
<value :comps="comps"></value>
</div>
</div>
</template>
<script>
import Value from './Value.vue'
export default {
name: 'recursive',
components: {
Value
},
props: {
comps: Number
},
computed: {
isEven () {
return this.comps % 2 == 0;
}
},
methods: {
toggle () {
this.comps++;
}
}
}
</script>
Value
<template>
<div class="value">
<h1 #click="toggle">{{comps}}</h1>
<div v-if="isEven">
<recursive :comps="comps"></recursive>
</div>
</div>
</template>
<script>
import Recursive from './Recursive.vue'
export default {
name: 'value',
components: {
Recursive
},
props: {
comps: Number
},
computed: {
isEven () {
return this.comps % 2 == 0;
}
},
methods: {
toggle () {
this.comps++;
}
}
}
</script>
Mounter
<template>
<div class="mounter">
<h1>HI</h1>
<recursive :comps="comps"></recursive>
</div>
</template>
<script>
import Recursive from './Recursive'
export default {
name: 'mounter',
components: {
Recursive
},
data () {
return {
comps: 0
}
}
}
</script>
I had a similar problem before. The only way out was declaring the component as "global", because importing it in the component which actually required it never worked.
new Vue({
...
})
Vue.component('recursive', require('./Recursive'))
Then you can just use without importing:
// Mounted
<template>
<div class="mounter">
<h1>HI</h1>
<recursive :comps="comps"></recursive>
</div>
</template>
<script>
export default {
name: 'mounter',
data () {
return {
comps: 0
}
}
}
</script>