I'm using Vue-stash as an alternative to vuex. Vue-stash itself is reactive. However, if I use it inside a data variable, that variable isn't changing
<template>
<div>
{{id}} // not reactive
</div>
</template>
<script>
export default {
data() {
return {
id: this.$store.id
}
}
}
</script>
A Vue instance's data property only gets set once on instantiation.
If you want the id to always reflect the value of this.$store.id, you should use a computed property:
export default {
computed: {
id() {
return this.$store.id;
}
}
}
Related
I am mapping getters from my Vuex store as a computed property and want to manipulate the property (its an array of objects) before using it in the component template. Any idea how I can do that?
I have tried watching the computed property but that doesn't work.
import {mapGetters} from 'vuex
computed: {
...mapGetters([
'property'
])
}
You can use your getter in another custom property like you will do for a simple variable :
<template>
<div>
<div v-for="item in transformedItems" :key="item">{{item}}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['items']),
transformedItems() {
return this.items.map(item => item.name)
}
}
}
</script>
And then you can use transformedItems in your template
I am using Single File Components and I have a modal component that has an
input box but I can't get the value of the input in a function below using the v-modal name. It keeps coming back as 'name is not defined'. Am I using the v-model attribute incorrectly?
<template>
<input v-model="name" class="name"></input>
</template>
<script>
export default {
methods: {
applyName() {
let nameData = {{name}}
}
}
}
</script>
You're right, you're using the v-model property incorrectly.
First off you need to define a piece of state in your component, using data:
export default {
data: () => ({
name: '',
}),
methods: {
log() {
console.log(this.name);
}
}
}
You can then bind this piece of data in your component using v-model="name", just like you did. However, if you want to access this piece of state in your method, you should be using this.name in your applyName() method.
Your {{name}} syntax is used to get access to the data in your template, like so:
<template>
<span>
My name is: {{name}}!
</span>
</template>
You have to use this pointer to access the model:
<template>
<input v-model="inputName" class="name"></input>
</template>
<script>
export default {
data() {
return {
inputName: '',
}
},
methods: {
applyName() {
// Notice the use of this pointer
let nameData = { name: this.inputName };
}
}
}
</script>
Look at the doc https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components
In the template, you are referring by name to data, computed or methods. In this case, it refers to data. When the input changes the name then the data is updated.
It is possible to use in a function referring to this.
<template>
<input v-model="name" class="name"></input>
</template>
<script>
export default {
data() {
return { name: '' }
},
methods: {
applyName() {
let nameData = this.name
}
}
}
</script>
This is a simple component. I'm trying to assign props to data as docs said so. (the initialData comes from vuex and database)
<template>
<section>
{{ initialData }}
{{ privateData }}
</section>
</template>
<script>
export default {
name: 'someName',
props: [
'initialData'
],
data() {
return {
privateData: this.initialData
};
}
};
But, the problem is initialData is OK, but privateData is just an empty object {}.
Weirdest thing is, if I save my file again, so webpack hot reloads stuff, privateData also gets the proper data I need.
Here is the parent:
<template>
<section v-if="initialData">
<child :initial-data="initialData"></micro-movies>
</section>
</template>
<script>
export default {
name: 'parentName',
data() {
return {};
},
computed: {
initialData() {
return this.$store.state.initialData;
}
},
components: {
child
}
};
</script>
I know that it's about getting data dynamically . because if I change initialData in parent to some object manually, it works fine.
The data function is only ever called once at component creation. If initialData is not populated at that point in time, then privateData will always be null. That is why you probably want to use a computed property, or watch the property.
I have a vuex store. on change of state preference in the vuex store. i want to rerender the DOM. i want the checkValue method to be called everytime the state preference in the vuex store changes.
index.html
<div id="app">
<my-component></my-component>
<my-other-component></my-other-component>
</div>
vue is initialised, and also store is imported here
my_component.js
Vue.component('my-component',require('./MyComponent.vue'));
import store from "./store.js"
Vue.component('my-other-component',require('./MyOtherComponent.vue'));
import store from "./store.js"
new Vue({
el : "#app",
data : {},
store,
method : {},
})
component where DOM needs to be change on change of the state preference in store
MyComponent.vue
<template>
<div v-for="object in objects" v-if="checkValue(object)">
<p>hello</p>
</div>
</template>
<script>
methods : {
checkValue : function(object) {
if(this.preference) {
// perform some logic on preference
// logic results true or false
// return the result
}
}
},
computed : {
preference : function() {
return this.$store.getters.getPreference;
}
}
</script>
Vuex store file
store.js
const store = new Vuex.Store({
state : {
preferenceList : {components : {}},
},
getters : {
getPreference : state => {
return state.preferenceList;
}
},
mutations : {
setPreference : (state, payload) {
state.preference['component'] = {object_id : payload.object_id}
}
}
component from where the vuex store is updated on clicking in the li element.
MyOtherComponent.vue
<div>
<li v-for="component in components" #click="componentClicked(object)">
</li>
</div>
<script type="text/javascript">
methods : {
componentClicked : function(object) {
let payload = {};
payload.object_id = object.id;
this.$store.commit('setPreference', payload);
}
}
</script>
Methods are not reactive,
which means they will not track changes and re-run when something
changes. That's what you have computed for.
So it means you need to use a computed to calculate what you need, but computed does not accept parameters and you need the object, so the solution is to create another component that accepts the object as a property and then perform the logic there:
MyOtherComponent.vue:
<template>
<div v-if="checkValue">
<p>hello</p>
</div>
</template>
<script>
props:['object','preference']
computed : {
checkValue : function() {
if(this.preference) {
// perform some logic on preference
// logic results true or false
return true
}
return false
}
}
</script>
And then in the original component:
<template>
<my-other-component v-for="object in objects" :object="object" :preference="preference">
<p>hello</p>
</my-other-component>
</template>
v-if should not contain a function call. Just the existence of the function will likely cause the v-if to always be true. v-if should test a variable or a computed property, and it should have a name that's a noun, not a verb ! If checkValue just proxies preference, why do you need it. Why not just v-if="preference" ?
I think your main issue is your mutation: VueJS creates everything it needs for reactivity during initialization, so your state.components object is already initialized when you try to override it with a new object with your mutation payload, which will then not be configured for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
Try changing your mutations to:
mutations: {
setPreference (state, payload) {
Vue.set(state.preferenceList.components, 'object_id', payload.object_id);
}
}
I'm trying to access this.$el.offsetTop in a computed property, but get the error:
Cannot read property 'offsetTop' of undefined
How can I access the offsetTop of the component in a computed method? if this is not possible then is there an alternative?
Component:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
computed: {
test() {
console.log(this.$el.offsetTop);
}
}
}
</script>
If a computed property is used in the template, its method will fire before the Vue instance is mounted, so this.$el will be undefined.
If your computed property is dependant on some property of this.$el, you can set it to a data property in the mounted hook (where this.$el will be defined).
In your case:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
data() {
return { offsetTop: null };
},
computed: {
test() {
console.log(this.offsetTop);
}
},
mounted() {
this.offsetTop = this.$el.offsetTop;
}
}
</script>
Here's what I did to solve this problem:
I set an el property to null in the component's data, and in the mounted hook, I set this.el to this.$el. Then, in the computed property, I check this.el before trying to access its properties to avoid an error during the first render. So, in the context of your example we'd have:
<template>
<div :class="{ 'active' : test }">{{test}}</div>
</template>
<script>
export default {
data: {
el: null,
},
computed: {
test() {
return this.el ? this.el.offsetTop : 0;
}
},
mounted(){
this.el = this.$el;
}
}
</script>
As a side note, I don't believe you have access to the console in Vue.js computed properties, so I removed that bit.