<script>
import {
mapGetters,
mapActions
} from "vuex";
export default {
name: 'Stores',
data() {
return {
selectedCity: {name: 'New York', code: 'NY'},
cities: storesList
}
},
methods: {
...mapActions(["fetchStores"])
},
computed: mapGetters(["storesList"]),
created() {
console.log( this.fetchStores());
this.fetchStores()
}
}
</script>
the cites should be
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]
vuex return data in array not working (cities: storesList)
Uncaught (in promise) ReferenceError: storesList is not defined
its show error .how to solve this?
Related
I created a text editor component for my Vue3 project which is based on Quill (for documentation --> https://quilljs.com/docs/api/#setcontents):
<template>
<div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";
export default {
props: {
modelValue: { type: String, default: '' },
},
data() {
return {
editor: null
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false]} ],
["bold", "italic", "underline", "link", "image"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: this.placeholder,
});
this.editor.root.innerHTML = this.modelValue;
this.editor.setText('Default Value');
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
computed: {
}
}
</script>
It works fine and as a default value, I set the text this.editor.setText('Default Value'); But I am getting Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967294 is larger than the node's length error when I try to delete the whole default value.
I want to show the default title "Introduction Props" in the tag when no props are provided. but I'm getting "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')" error.
<p>{{ section.title }}</p>
export default {
props: {
section: Object,
default: {
type: "section",
title: "Introduction Props",
desc: "",
children: [
{
type: "lecture",
title: "Introduction",
},
],
}
},
};
you have to rearrange your props:
export default {
props: {
section: {
type: Object,
default: () => {
type: "section",
title: "Introduction Props",
desc: "",
children: [
{
type: "lecture",
title: "Introduction",
}
]
}
},
};
I want to send data from home component via book.vue router link, but I am getting an error. Where am I doing wrong?
Home.vue
export default {
data() {
return {
data: {
attributes: {
name: 'Jonh',
age: '25',
},
},
}
},
}
router/index.js:
const routes = [
{ path: '/Library/:id', name: 'Book', component: Book, props: true },
]
navigation:
:to="{ name: 'Book', params: { id: book.id}, props: { data: data.attributes} }"
Book.vue
export default {
props: {
id: {
type: Array,
required: true
}
}
}
I am using https://github.com/r3code/vue-vis-network
I am getting error: Cannot read property 'hasChildNodes' of undefined
My component code is:
<template>
<el-container >
<el-main>
<network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>
<button #click="get_data">GetData</button>
</el-main>
</el-container>
</template>
<script>
export default {
components: { Notification },
data () {
return {
nodes: [],
edges: [],
options: []
}
},
methods:
{
get_data()
{
axios.get(base_url + '/graph')
.then((response) => {
this.nodes = response.data.nodes;
this.edges = response.data.edges;
}).catch((error) => { console.log(error); });
}
},
}
</script>
index.js:
Vue.component('network', new vueVisNetwork.Network);
I suppose that there is problem that it's attempt to access to data placed in #app. How I can say him that he should use data declared in component?
Actual data example:
nodes : [
{id: 1, label: 'Fooo"', group: "company"},
{id: 2, label: 'Baaar', group: "owner"},
],
edges : [
{from: 1, to: 2},
],
possible related issue https://github.com/crubier/react-graph-vis/issues/57
I've almoust finished my app in Vuejs and now I decided to "rewrite" everything on Nuxt due to SSR :)
I almoust get everything but there is this getter thing I am not getting.. I can't make it around even though I tried so hard and I am not sure what I am missing.
I am using vuex module so my /store/categories.js looks like:
export const state = () => ({
categories: [
{
name: 'category 1',
id: '1'
subcategories: [
{
name: 'Subcategory 1',
id: '1.1'
}
]
},
{
name: 'category 2',
id: '2',
subcategories: [
{
name: 'Subcategory 2',
id: '1.1'
}
]
}
]
})
export const getters = () => ({
filterCategory() {
return state.categories
},
})
This is a simple getter above and I can't even make this work..
And here is my posts/test.vue page:
<template>
<div>
<p>{{ filter }} </p>
<p>{{ mainCategories }} </p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'test',
layout: 'test',
data () {
return {
search: '',
}
},
computed: {
...mapGetters({
filter: 'categories/filterCategory'
}),
mainCategories () {
return this.$store.getters['categories/filterpazari']
}
},
}
</script>
What am I missing ?
Getters should be exported as objects not function.
As Bert already mentioned in the comment how to declare getters. But it was trouble some to find the solutions at first glance. So here is the formated answer.
const getters = {
filterCategory: state => state.categories,
}
export default getters
Credit to Bert