Any idea on how to set custom date, month and year on vue3-date-time-picker?
I want to set the date, month an year to a custom value before the user will change it on his own.
https://vue3datepicker.com/
You mean
Options API
<script>
import Datepicker from "vue3-date-time-picker";
import "vue3-date-time-picker/dist/main.css";
export default {
components: { Datepicker },
data() {
return {
date: new Date("2021-12-31"),
};
},
};
</script>
Composition API
<script>
import { ref } from "vue";
import Datepicker from "vue3-date-time-picker";
import "vue3-date-time-picker/dist/main.css";
export default {
name: "Demo",
components: {
Datepicker,
},
setup() {
const date = ref(new Date("2021-12-31"));
return {
date,
};
},
};
</script>
Related
I've got a NUXT/VUE component which does an API call and assigns the result to the data, therefore template maps the result to the page. Simple API call.
I am just not sure how I can do that in Storybook component?
Do I have to mock the API fetch or pass the static data to the component in the Storybook?
Examples on the the official website is all about props, nothing about data
https://storybook.js.org/docs/react/writing-stories/args
Here is my simple component
<template>
<div>{{blogPosts.title}}</div>
</template>
<script>
export default {
data() {
return {
blogPosts: [],
};
},
async fetch() {
this.blogPosts = await this.$http.$get("https://api.nuxtjs.dev/posts");
},
};
</script>
Here is my Storybook Component:
import { Meta, Story } from "#storybook/vue";
import BlogCarousel from "./BlogCarousel.vue";
import { BlogPost } from "~/lib/types/BlogPost";
export default {
title: "BlogCarousel",
components: BlogCarousel,
} as Meta;
const Template: Story<BlogPost> = (args) => {
return {
components: { BlogCarousel },
template: `<BlogCarousel v-bind=${args.blogPosts} />`,
};
};
export const Default = Template.bind({});
Default.args = {
blogPosts: [
{
title: "test",
created: "today",
},
],
};
I am having trouble with something seemingly simple: how do I use a prop, passed to my component, as the basis for some computation? As in --
export default {
props: {
officeConsumption: {
type: Number,
},
commuteOutput: {
type: Number,
},
savings: {
type: Number,
}
},
data() {
return {
drives: this.savings,
flights: this.savings
}
},
And so on, except I want do something with savings (like Math.round) and use it in my template like {{ drives }}. I get as far as {{ savings }} i.e. using the original prop but am having trouble achieving the desired end result {{ Math.round(savings * / + some computation) }}. This is due 3 and Vite.
You have two ways of using computed in Vue3. Under the hood, they're the same thing:
1. Composition API computed:
import { defineComponent, computed } from 'vue';
export default defineComponent({
props: {
officeConsumption: {
type: Number,
},
},
setup(props) {
const myComputed = computed(() => Math.round(props.officeConsumption));
return {
myComputed
}
}
})
Another flavor of the above is inside a reactive() object:
import { defineComponent, computed, reactive, toRefs } from 'vue';
export default defineComponent({
props: {
officeConsumption: {
type: Number,
},
},
setup(props) {
const state = reactive({
myComputed: computed(
() => Math.round(props.officeConsumption)
)
})
return {
...toRefs(state)
}
}
})
2. Options API computed (just like in Vue 2, it's still available):
import { defineComponent } from 'vue'
export default defineComponent({
props: {
officeConsumption: {
type: Number,
},
},
computed: {
myComputed() {
return Math.round(this.officeConsumption);
}
}
})
All of the above produce the same result. You can use myComputed in the <template>.
When we use vue2 to create API, we just follow options API like below:
data are in data
methods are in methods
<script>
export default {
name: 'demo',
components: {},
filter:{},
mixins:{},
props: {},
data(){
return{
}
},
computed:{},
watch:{},
methods: {},
}
</script>
But the vue3 changed, how should I build a component with vue3 composition API?
Some example say that I should import reactive etc. From vue first and put all codes in setup(){}?
Some example show that I can add setup to <script>?
Please give me an example.
ok bro , Composition Api works like that:
<script>
import { fetchTodoRepo } from '#/api/repos'
import {ref,onMounted} from 'vue'
export default {
setup(props){
const arr = ref([]) // Reactive Reference `arr`
const getTodoRepo = async () => {
arr.value = await fetchTodoRepo(props.todo)
}
onMounted(getUserRepo) // on `mounted` call `getUserRepo`
return{
arr,
getTodoRepo
}
}
}
</script>
There are two ways to create a component in vue3.
One：<script> + setup(){},such as this:
<script>
import { reactive, onMounted, computed } from 'vue'
export default {
props: {
title: String
},
setup (props, { emit }) {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
onMounted(() => {
console.log('title: ' + props.title)
})
const login = () => {
emit('login', {
username: state.username,
password: state.password
})
}
return {
login,
state
}
}
}
</script>
Two：use <script setup="props">
loading....
In my project, I have 3 components. one component is already showing on the page and now I want to add those 2 components with that component. The code is in below,
<template>
<component v-bind:is="currentComponent" ></component>
</template>
<script>
import { ROAST_CONFIG } from '../../../config/config.js';
import ZoneIndex from './components/zone/Index';
import { listen } from '../../../util/history.js';;
import axios from 'axios'
let baseUrl = ROAST_CONFIG.API_URL;
export default {
name: 'LocationsView',
layout: 'admin/layouts/default/defaultLayout',
middleware: 'auth',
components: {
'zone-index' : ZoneIndex,
},
data() {
return { currentComponent:'','stateId':''}
},
methods: {
updateCurrentComponent(){
console.log(this.$route.name);
let vm = this;
let route = vm.$route;
if(this.$route.name == "Locations"){
this.currentComponent = "zone-index";
}
}
},
mounted() {
let vm = this;
let route = this.$route;
window.addEventListener('popstate',this.updateCurrentComponent);
},
created() {
this.updateCurrentComponent();
}
}
The ZoneIndex component is showing in the code. The other 2 components are CountryIndex and StateIndex.
The correct way to carry out your procedure would be.
<template>
<div>
<zone-index></zone-index>
<state-index></state-index>
<country-index></country-index>
</div>
</template>
<script>
import ZoneIndex from './components/zone/Index';
import CountryIndex from '...way';
import StateIndex ryIndex from '...way';
import { ROAST_CONFIG } from '../../../config/config.js';
import { listen } from '../../../util/history.js';;
import axios from 'axios'
let baseUrl = ROAST_CONFIG.API_URL;
export default {
name: 'LocationsView',
layout: 'admin/layouts/default/defaultLayout',
middleware: 'auth',
components: { ZoneIndex, CountryIndex, StateIndex },
data() {
return { currentComponent:'','stateId':''}
},
methods: {
updateCurrentComponent(){
console.log(this.$route.name);
let vm = this;
let route = vm.$route;
if(this.$route.name == "Locations"){
this.currentComponent = "zone-index";
}
}
},
mounted() {
let vm = this;
let route = this.$route;
window.addEventListener('popstate',this.updateCurrentComponent);
},
created() {
this.updateCurrentComponent();
}
}
I'm new to Vue.js and looking for the equivalent of a service in AngularJS, specifically for storing data once and getting it throughout the app.
I'll be mainly storing the results of network requests and other promised data so I don't need to fetch again on very state.
I'm using Vue.JS 2.0 with Webpack.
Thanks!
I think what u are seeking for is vuex, which can share data from each component.
Here is a basic demo which from my code.
store/lottery.module.js
import lotteryType from './lottery.type'
const lotteryModule = {
state: {participantList: []},
getters: {},
mutations: {
[lotteryType.PARTICIPANT_CREATE] (state, payload) {
state.participantList = payload;
}
},
actions: {
[lotteryType.PARTICIPANT_CREATE] ({commit}, payload) {
commit(lotteryType.PARTICIPANT_CREATE, payload);
}
}
};
export default lotteryModule;
store/lottery.type.js
const PARTICIPANT_CREATE = 'PARTICIPANT_CREATE';
export default {PARTICIPANT_CREATE};
store/index.js
Vue.use(Vuex);
const store = new Vuex.Store();
store.registerModule('lottery', lotteryModule);
export default store;
component/lottery.vue
<template>
<div id="preparation-container">
Total Participants: {{participantList.length}}
</div>
</template>
<script>
import router from '../router';
import lotteryType from '../store/lottery.type';
export default {
data () {
return {
}
},
methods: {
}，
computed: {
participantList() {
return this.$store.state.lottery.participantList;
}
},
created() {
this.$store.dispatch(lotteryType.PARTICIPANT_CREATE, [{name:'Jack'}, {name:'Hugh'}]);
},
mounted() {
},
destroyed() {
}
}
</script>
You don't need Vue-specific services in Vue2 as it is based on a modern version of JavaScript that uses Modules instead.
So if you want to reuse some services in different locations in your code, you could define and export it as follows:
export default {
someFunction() {
// ...
},
someOtherFunction() {
// ...
}
};
And then import from your Vue code:
import service from 'filenameofyourresources';
export default {
name: 'something',
component: [],
data: () => ({}),
created() {
service.someFunction();
},
};
Note that this is ES6 code that needs to be transpiled to ES5 before you can actually use it todays browsers.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export