Anyone know why the variable number doesn't display the latest value when click on it? I tried using onMounted, but didn't seem to do anything. When I clicked on the paragraph it always displays 1. I expect it to display the latest number added. Any ideas?
<script setup>
import TheWelcome from '#/components/TheWelcome.vue'
import { onMounted, ref } from 'vue'
import axios from "axios"
let number = 1;
function getCurrentNumber() {
number++;
console.log(number)
}
</script>
<template>
<main>
<TheWelcome />
</main>
<p #click="getCurrentNumber">Hello, this is a test to display {{number}}</p>
</template>
This is how it should be
<script setup>
import { ref } from 'vue'
const number = ref(1);
function getCurrentNumber() {
number.value++
console.log(number.value)
}
</script>
<template>
<p #click="getCurrentNumber">Hello, this is a test to display {{ number }}</p>
</template>
Here is a working example.
Related
In the following code i want to load component dynamically based on value stored in the vuex store. But when I run this code then in developer console I am getting Maximum call stack size exceed when using computed in vue component. Computed function is running multiple time.
<template>
<div>
<component :is="layout"></component>
</div>
</template>
<script setup>
import { computed } from 'vue';
import app from './layouts/app-layout.vue';
import auth from './layouts/auth-layout.vue';
import { useMeta } from '#/composables/use-meta';
import { useStore } from 'vuex';
useMeta({ title: 'My Title' });
const store = useStore();
const layout = computed(() => {
return store.getters.layout;
});
</script>
For some reason the onActivated function in vue3 wont trigger and cannot figure out why. It is not the first time I am implementing this but for some reason nothing happens. I am using vue 3.0.0. Here is my code and component
Index.vue
<template>
<MyComp />
</template>
<script setup>
import MyComp from "../components/MyComp.vue";
</script>
MyComp.vue
<template>
<div>{{ el }}</div>
</template>
<script setup>
import { ref, onMounted, onActivated } from "vue";
const el = ref("Hello");
onMounted(() => {
console.log("onMounted");
});
onActivated(() => {
console.log("onActivated");
});
</script>
onActivated only triggers for components inside a KeepAlive tag, but you don't have any KeepAlive tags in the code you posted, so onMounted should be all you need. See https://vuejs.org/api/composition-api-lifecycle.html#onactivated
In allImport.vue page I am passing props like that:
<sidebarProductDetails :row="singleRow" />
sidebarProductDetails.vue page I have this code:
<template>
<div>
<pre>{{ row }}</pre>
<!-- I can see all the data in this row object -->
</b-row>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper"
import { BImg } from "bootstrap-vue"
import "swiper/css/swiper.css"
export default {
props: ['row'],
components: {
Swiper,
SwiperSlide,
BImg,
},
mounted() {
console.log(this.row);
// Can't get anyting showing me undefined
},
}
</script>
Here you can see the I just log the row props on the mounted hook but nothing is showing. The interesting things is that I can see all the data inside the wrapper.
Is there anything I am dong wrong?
I am new to Vue. I am a react developer trying to update some legacy code from my work.
What I want to do is I want to have a screen resize event handler in my component.
I found some helpful code pen https://codepen.io/sandrarodgers/pen/porZbxW
The thing is I don't know how to add those in my existing component.
To give you the general idea. My component already got two script tags
When I try to copy paste from codeine it give me some error on this keyword
Component
<template>
<div :style="styles">
...
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MultipleChoiceField from '../fields/MultipleChoiceField.vue';
import NumberField from '../fields/NumberField.vue';
export default defineComponent({
name: 'Questionnaire',
components: {
MultipleChoiceField,
NumberField,
},
});
</script>
<script setup lang="ts">
import {
defineProps,
defineEmits,
computed,
nextTick,
onMounted,
ref,
toRefs,
watch,
unref,
} from 'vue';
import {
handleQuestionLogicCalculator,
} from '../../lib/main';
import { typeformMarkdownToHtml } from '../../lib/processTypeformMarkdown';
import {
PrefilledAdditionalParameters,
QuestionnaireChoice,
} from '../../lib/types';
import localize from '../../lib/localization';
const props = defineProps<{
additions: PrefilledAdditionalParameters;
questionnaireConfig: QuestionnaireConfig;
styles: QuestionnaireStyles;
submitAnswers: ShowThankYouFunction;
showwelcomeScreen: () => void;
goBack: () => void;
}>();
const emit = defineEmits(['latestQuestionnaireIndex']);
//MORE CODE HERE
</script>
For the purpose of learning Vue, I am trying to create a very simple app that will return highlighted code from the input in real-time. I went through a few Prism tutorials and examples, but can't get this to work. Any help or guidance will be appreciated, as I am just getting started with Vue and I have a feeling that I am mixing something up.
This is HelloWorld.vue:
<template>
<div>
<h1>Prism Demo</h1>
<div id="editor">
<textarea v-model="message"></textarea>
<div>{{ highlighteddMessage }}</div>
</div>
</div>
</template>
<script>
import Prism from 'vue-prism-component'
export default {
data() {
return {
message: `var myFunction = function() {
statements
}`
};
},
computed: {
highlighteddMessage: function () {
return Prism.highlight(this.message, Prism.languages.js);
}
}
}
</script>
<style scoped>
...
</style>
And my main.js:
import Vue from 'vue'
import App from './App.vue'
import "prismjs";
import "prismjs/themes/prism-funky.css";
import "prismjs/components/prism-scss.min";
import "prismjs/plugins/autolinker/prism-autolinker.min";
import "prismjs/plugins/autolinker/prism-autolinker.css";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
I think the problem is in how I am trying to use Prism in the computed property, but I am unable to fix it. WIll appreciate any hints on correctly using Prism in Vue.
You should add Prism to your components option components:{Prism} and then in the template wrap the code with that component and no need to create a computed property :
<div>
<h1>Prism Demo</h1>
<div id="editor">
<textarea v-model="message"></textarea>
<prism language="javascript">{{ message }}</prism>
</div>
</div>
</template>
<script>
import Prism from 'vue-prism-component'
export default {
data() {
return {
message: `var myFunction = function() {
statements
}`
};
},
components:{
Prism
}
}
</script>