NO LONGER MAINTAINED: Please migrate to http://chat.vuejs.org/ for the new and improved community chat
Bascially, the scroll position works on every other page but when I navigate from index page to some other page and come back to index page the scroll position is lost.
router.options.scrollBehavior = function (to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else if (to.hash) {
return new Promise((resolve, reject) => {
console.log("entered promise")
setTimeout(() => {
resolve({
selector: to.hash,
behavior: 'smooth'
})
}, 0)
})
} else {
console.log("final else block");
return {
x: 0,
y: 0
}
}
}
`
Hello guys! I'm starting on vuejs and I came across a small error:
"use data or computed property based on the prop's value. Prop being mutated".
What is the error in my component?
code
export default {
mounted() {},
props: ["alunos"],
data() {
return {
};
},
beforeMount() {
this.obterAlunos();
},
methods: {
novo() {
window.location = "./novo";
},
obterAlunos() {
axios.get("./alunos").then(({ data }) => {
this.alunos = data;
});
},
setVal(val, val1, val2, val3, val4) {
},
excluir(id) {
if (confirm("Deseja realmente excluir?")) {
axios.get("./aluno/excluir/" + id).then(({ response }) => {
location.reload();
});
}
}
}};
<div data-target="deleteModal">Foo</div>
<div id="deleteModal">Bar</div>
<script>
$('div[data-target="deleteModal"]').on('click', function() {
$(`#${$(this).attr('data-target')}`).text('something');
})
</script>
https://github.com/Siemienik/XToolSet/releases/tag/xlsx-renderer-v2.4.0
That introduce 2 new features that kick the functionality off :) Give it a review, we are very, very curious what do you think about our library ;)
Hello anyone with experience in gidsome?
I would need some help regarding using vue-scroll-position in gridsome.
Repost!!
I have trouble implmenting vue scroll position on my gridsome index.vue page. I have a button which navigates to another page but when ı go back with the browser back button, the vue gets scrolled to the top.
router.options.scrollBehavior = function (to, from, savedPosition) {
console.log("scroll position running");
if (savedPosition) {
console.log("saved postion ", savedPosition);
return savedPosition;
} else if (to.hash) {
console.log("has found ", to.hash);
console.log(to);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
selector: to.hash,
behavior: 'smooth'
})
}, 0)
})
} else {
return {
x: 0,
y: 0
}
}
}This is what I am using in my main.js file.
can someone point out what am I missing.
Note: the scroll position is working on every other page. For example, navigating from page2 to page3 and coming back to page2 put me exactly where I pressed the button from.
<template>
<el-row>
<el-col :span="24">
<el-image
v-for="(card, index) in randomCards"
:key="card.indexOf"
:src="card.url"
:id="(card.id = index)"
fit="fill"
@click="flipCards(index)"
></el-image>
</el-col>
</el-row>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
selectedCardsId: [],
randomCards: null,
data: [],
};
},
computed: {},
methods: {
getResults() {
axios
.get("https://api.thecatapi.com/v1/images/search", {
params: { limit: 36 },
})
.then((response) => {
this.randomCards = response.data
.concat(response.data)
.sort(() => 0.5 - Math.random());
});
},
flipCards(cardIndex) {
this.randomCards[cardIndex].url = "1";
},
},
async mounted() {
await this.getResults();
},
};
</script>
<style scoped>
.el-image {
width: 100px;
height: 100px;
margin: 10px;
}
</style>use: [
{ loader: MiniCssExtractPlugin.loader },
{loader: 'css-loader',
options: {
modules: {
compileType: "module",
localIdentName: '[sha1:hash:hex:4]',
},
importLoaders: 1
}
}],
https://docs.google.com/forms/d/e/1FAIpQLSdygaBDG5LssxfU1W5cZJrGLuQb8AsxjQ8NBlMkteuiCHrVRw/viewform
thank you all
@gsparber If you open Chrome Developer Tools, then under the "Network" tab you will see a "Disable cache", this will force reload the static files as long as the console is open... Very handy during developement. For production use, you should be using random names on the files, vue-cli handles this for you, if you include the static files directly yourself, then adding a ?myUniqueIdThatChangesGoesHere to the style will also change it, back in the old days we often used the version number. src="./my/path/to/css/mycss.css?1.2.4
The browser will treat it it as a different file and reload it.
