I want give an element a class when it's in the viewport and I don't know how I can handle it. I watched a few Videos on Youtube but nothing helped me.
I work with a boilerplate so I can't implement additional plugins.
My script looks actually like this.
export default {
head() {
return {
title: this.$t("headData.index.title"),
meta: [
{
hid: "description",
name: "description",
content: this.$t("headData.index.description")
}
]
}
},
data() {
return {
debugSingleScroll: true,
}
},
methods: {
handleScroll() {
if(this.debugSingleScroll) {
this.scrollToNextModule()
this.scrollToLastModule()
this.debugSingleScroll = false;
}
},
scrollToNextModule() {
this.$refs.factsModule.triggerAnimation();
},
scrollToLastModule() {
},
},
mounted () {
window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll);
},
}
Related
I am using watch and created method for the same data.Is it duplicate code? Is there a better way to do it?
props: {
regionList: {
type: Array,
},
},
data() {
return {
regions: [],
};
},
watch: {
regionList() {
if (this.regionList) {
this.regions = this.regionList;
}
},
},
created() {
if (!this.regionList) {
this.getApi();
} else {
this.regions = this.regionList;
}
},
It is what immediate watcher is for:
watch: {
regionList: {
immediate: true,
handler(newVal) {
if (newVal.length) {
this.regions = newVal;
}
}
},
},
created() {
if (!this.regionList) {
this.getApi();
}
},
I'm creating a recursive method in Nuxt, can I do it?
Here is my component:
<script>
export default {
data() {
return {
items: [],
auxitems: [],
}
},
methods: {
orderRecursive(items, auxitems) {
items.data.forEach((element) => {
auxitems.push(element)
})
if (items.child.length > 0) {
this.orderRecursive(items.child, auxitems)
} else {
//
}
},
},
}
</script>
The struct items is like:
items= [
data: [{array}],
child: [{data, child}]
]
My intention is order all data in one array, then, I can show in view.
My method orderRecursive() is not working, can you tell me why?
I'm trying to create xstate Machine which has condition to be check when moving to another state(Using VueJs).
issue is the way tried which is not working with vue-kanban(https://github.com/BrockReece/vue-kanban) pkg
below is my sample state machine config :
stateMachineConfig: {
id: "kanban",
initial: "on-hold",
states: {
"on-hold": {
on: {
IN_PROGRESS:"in-progress",
}
},
"in-progress": {
on: {
RELINQUISH_TASK: "on-hold",
PUSH_TO_QA: "needs-review",
},
},
"needs-review": {
on: {
REQUEST_CHANGE: "in-progress",
PASS_QA: "approved",
},
},
approved: {
type: "final",
},
},
},
this is the UI of kanban(https://ibb.co/6rWxN0F)
after i changing above config by adding condition to "on-hold" state then i can't move to anywhere from "on-hold" state.
below is the new config:
const searchValid = (context) => {
console.log(`context.status `, context);
return true;
};
stateMachineConfig: {
id: "kanban",
initial: "on-hold",
states: {
"on-hold": {
on: {
PICK_UP: [
{
target: "in-progress",
cond: searchValid
}
]
}
},
"in-progress": {
on: {
RELINQUISH_TASK: "on-hold",
PUSH_TO_QA: "needs-review",
},
},
"needs-review": {
on: {
REQUEST_CHANGE: "in-progress",
PASS_QA: "approved",
},
},
approved: {
type: "final",
},
},
},
any help to fix it!
I have tested your machine using the XState visualizer and all works properly, you can check it here
UPDATE: the main issue seems to be that the props only get updated once. They should change when this.campaign.name becomes available.
I want to dynamically update the title and breadcrumb data fields and show them on the page. Currently page page shows undefined or null. How can I fix this?
I tried to create a computed value but it only seems to update once (after head and breadcrumb data is already showed). A method does not work since I don't have anything to trigger the method.
What is the correct way to fix this?
I am using nuxt generate to deploy the app.
export default {
components: { PageHeader },
middleware: 'authenticated',
data() {
return {
title: 'Campaigns' + this.campaignName,
breadcrumb: [
{
text: 'Campaigns',
href: '/'
},
{
text: this.campaignName,
href: '/'
}
],
campaign: ''
}
},
apollo: {
campaign: {
prefetch: true,
query: campaignQuery,
variables() {
return { id: this.$route.params.id }
}
}
},
computed: {
campaignName() {
return this.campaign && this.campaign.name
}
},
head() {
return {
title: this.title
}
}
}
</script>
Your computed property campaignName returns undefined cuz this.campaign.name is not defined
campaignName() {
if(this.campaign && this.campaign.name) return "Campaigns" + this.campaign.name;
return "default value";
}
Then you can use it directly in head
head() {
return {
title: this.campaignName
}
}
The solution was putting the data elements directly as a computer property. (so no recalculation)
export default {
components: { PageHeader },
middleware: 'authenticated',
data() {
return {}
},
apollo: {
campaign: {
prefetch: true,
query: campaignQuery,
variables() {
return { id: this.$route.params.id }
}
}
},
computed: {
title() {
return this.campaign && `Campaign: ${this.campaign.name}`
},
breadcrumb() {
return [
{
text: 'Campaign',
href: '/'
},
{
text: this.campaign && this.campaign.name,
href: '/'
}
]
}
},
head() {
return {
title: this.title
}
}
}
</script>
I'm trying to setup dynamic binding of firebase node based on component data, like this
export default {
name: 'data',
props: {
api: {
type: String
},
section: {
type: String
}
},
firebase: {
apiData: {
source: (console.log('source', this.api), db.ref(this.api)),
asObject: true
}
},
updated: function() {
console.log('updated', this.api, this.section)
},
created: function() {
console.log('created', this.api, this.section)
}
}
My problem is, update event is fired, but apiData source update is not fired.
What is the correct way to do this with vuefire?
After some reading of vuefire docs, I came up with watch solution
data: function(){
return {
apiData: {}
}
},
created: function() {
this.$bindAsObject('apiData', db.ref(this.api))
},
watch: {
api: function() {
this.$bindAsObject('apiData', db.ref(this.api))
}
}