How to display the getter as text in the template - javascript

I have a getter, which I would like to display in the template as text.
The data is already in the getter, checked with devtools vue chrome extension.
The data I want to get from the getter looks like this:
["appel", "banaan", "kiwi"]
My component looks like this: (the name of getter is getPlaylist)
<template>
<div>
<span>{{ showPlaylist }}</span>
</div>
<template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
};
},
computed: {
...mapGetters("app"["getPlaylist"]),
showPlaylist() {
this.getPlaylist;
},
},
};
</script>
How can I use this getter to show the text of the array?
Thanks in advance!

Do you want to display this ["appel", "banaan", "kiwi"] in the template
If yes, modify the code to
computed: {
...mapGetters("app"["getPlaylist"]),
showPlaylist() {
return this.getPlaylist;
},
}

Not sure what you're hoping to get with ...mapGetters("app"["getPlaylist"]), but I can't see it doing anything else other than being an undefined
"app" is a string, which doesn't behave like an object or array. the only thing available that could be accessed is string methods (ie "app"["startsWith"]("a")) or characters "app"[2])
if app is a module and getPlaylist the getter, you need to define it as:
computed: {
...mapGetters(["app/getPlaylist"]),
}
alternatively if app is another getter...
computed: {
...mapGetters(["app","getPlaylist"]),
}
or if app is a namespace
computed: {
...mapGetters("app",["getPlaylist"]),
}

Related

Text input placeholder returning something it is not supposed to

I don't know why it is doing this. It has never done it before
<template>
<input type="text" v-model="query" placeholder="something"/>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
query: String,
};
},
});
</script>
And the input looks like this when the site loads
Any ideas?
Kind of solution. Changed
query: String
to
query: ""
String is an object constructor in JavaScript.
The Vue data object needs to return an object.
Each key should initialize a value or undefined/null
Reactive Vue data types are infered. See this on types in Vue.
Initialize the value as a empty string, like this:
{
query: ""
}
or undefined like this
{
query: undefined
}

Vuejs can vue file be regarded as json compliant object definition

I have just started vuejs and noticed that some kind of strucutre in .vue files.
export default {
data() {
return {
temp: {},
list: []
};
},
methods: {
addNew: function() {
},
entitySaved($event) {
}
}
}
Can we suppose export to be json compliant structure? If so, what is meant by data() function without it property name? Losts of such styles can also be seen in vuex.
Its not a json its just an object with functions,objects
you can make one by your self to check it like:
export default {
hey(){
return true
}
}
just import something like that and check it results

Bind dynamically value to component's props

I have defined custom component with props. when I using this component I need dynamically bind value to on of these props
In custom component's template I have defined element like this:
<template>
...
<div class="input-group-addon" v-show="currency">{{ currency }}</div>
...
</template>
and its prop:
export default {
...
props: {
currency: {
type: String
}
}
...
}
And component's usage in another component:
component's template
<custom-component currency="calculateCurrency" ></custom-component>
component's code
export default {
components: {custom-component},
data: () => ({
myProject: null // this is used as v-model in combo box
}),
computed: {
calculateCurrency: function() {
return myProject.currency; // currency is getter in object myProject
}
}
}
so in result I have something like this:
I also tried use
suffix=calculateCurrency
without quotes but didn't help. can you help me fix it please? Thanks
I believe you are missing a colon on the binding property:
<custom-component :currency="calculateCurrency" ></custom-component>
Adding that before "currency" will allow for data-binding

Pass state property via props (Vuex)

I have a component that should display data from the store, but the component is reusable, so I would like to pass the name of the store module and property name via props, like so:
<thingy module="module1" section="person">
Then, in the component:
<template>
<h2>{{ title }}</h2>
<p>{{ message }}</p>
</template>
<script>
import { mapState } from 'vuex';
import get from 'lodash.get';
export default {
props: [
'module',
'section',
],
computed: mapState(this.module, {
title: state => get(state, `${this.section}.title`),
message: state => get(state, `${this.section}.message`),
})
}
</script>
The problem is, it seems the props are undefined at the time when mapState() is executed. If I hardcode the prop values, the component works. Also, if I log the props in the created() hook, I get the expected values. So it seems like a race condition.
Am I going about this the wrong way here?
Update
The module namespace must be passed from within the mapping function, like so:
computed: mapState({
title() {
return get(this.$store.state, `${this.module}.${this.section}.title`);
},
message() {
return get(this.$store.state, `${this.module}.${this.section}.message`);
}
})
(note that get() is a lodash, not a vue function)
This can be further abstracted into a mixin.
Note the comment in the mapState example:
// to access local state with `this`, a normal function must be used
countPlusLocalState (state) {
return state.count + this.localCount
}
You are using arrow functions.
As for this.module, I think you're going to have to forego the binding helper notation and explicitly put the module reference into the definitions. I'm guessing that looks like:
computed: mapState(this.module, {
title(state) {
return get(`${state}.${this.module}`, `${this.section}.title`);
},
message(state) {
return get(`${state}.${this.module}`, `${this.section}.message`);
}
})

Vuex how to Access state data on component mounted or created hook?

I'm trying to create a Quill.js editor instance once component is loaded using mounted() hook. However, I need to set the Quill's content using Quill.setContents() on the same mounted() hook with the data I received from vuex.store.state .
My trouble here is that the component returns empty value for the state data whenever I try to access it, irrespective of being on mounted() or created() hooks. I have tried with getters and computed properties too. Nothing seems to work.
I have included my entry.js file, concatenated all the components to make things simpler for you to help me.
Vue.component('test', {
template:
`
<div>
<ul>
<li v-for="note in this.$store.state.notes">
{{ note.title }}
</li>
</ul>
{{ localnote }}
<div id="testDiv"></div>
</div>
`,
props: ['localnote'],
data() {
return {
localScopeNote: this.localnote,
}
},
created() {
this.$store.dispatch('fetchNotes')
},
mounted() {
// Dispatch action from store
var quill = new Quill('#testDiv', {
theme: 'snow'
});
// quill.setContents(JSON.parse(this.localnote.body));
},
methods: {
setLocalCurrentNote(note) {
console.log(note.title)
return this.note = note;
}
}
});
const store = new Vuex.Store({
state: {
message: "",
notes: [],
currentNote: {}
},
mutations: {
setNotes(state,data) {
state.notes = data;
// state.currentNote = state.notes[1];
},
setCurrentNote(state,note) {
state.currentNote = note;
}
},
actions: {
fetchNotes(context) {
axios.get('http://localhost/centaur/public/api/notes?notebook_id=1')
.then( function(res) {
context.commit('setNotes', res.data);
context.commit('setCurrentNote', res.data[0]);
});
}
},
getters: {
getCurrentNote(state) {
return state.currentNote;
}
}
});
const app = new Vue({
store
}).$mount('#app');
And here is the index.html file where I'm rendering the component:
<div id="app">
<h1>Test</h1>
<test :localnote="$store.state.currentNote"></test>
</div>
Btw, I have tried the props option as last resort. However, it didn't help me in anyway. Sorry if this question is too long. Thank you for taking your time to read this. Have a nice day ;)
I copied your code and tested it ( of-course I created my own dummy notes so I could remove the get request ) and I was able to get the notes display on a page.
A couple of things that I realized from your code, you may need to add a store property as there are places in your component ( test ) where you are referencing it, yet you only define it on the 'app' component. So in this section of your code modify as shown below:
props: ['localnote'],
data() {
return {
localScopeNote: this.localnote,
store : store
}
},
The key difference is the definition of the 'store' property. Please note that, what you have done, defining a "store" property in your app component, is correct, but the very same needs to be defined in "test" component as I have shown in the above code snippet above.
Second thing is, you are using $store and I guess that gives you undefined, unless as you said, in the libraries that you included this resolves accordingly, but on my side I had to remove all references of "$store" and replace it with just "store" (without the dollar sign).
Lastly for testing purposes, I would advise you to also

Categories