I ended up turning off Vetur linting. Vetur thinks that it is a Vue 2 project becuase it is in a VS Code workspace. https://github.com/vuejs/vetur/issues/2299#issuecomment-696015374 You can solve this by doing F1>Preferences:Open Settings (JSON) paste “vetur.validation.template”: false, “vetur.validation.script”: false, “vetur.validation.style”: false,
FOR vue-cli vue 3 render function missed in createApp. When setting your app by using createApp function you have to include the render function that include App. in main.js update to : FIRST change the second line in javascript from:- const { createApp } = Vue to the following lines: import { createApp,h } from … Read more
You don’t need to. This article will help you to understand why we needed vue.set in the first place. In short, you need it so that you could add a new property to a data object without breaking the reactivity. With Vue 3, you no longer need to worry about breaking the reactivity. What the … Read more
Items in data like your tickets are made into observable objects. This is to allow reactivity (automatically re-rendering the UI and other features). This is expected and the returned object should behave just like the array. Check out the reactivity docs because you need to interact with arrays in a specific pattern or it will … Read more
Try this in your webpack.mix.js mix.js(‘resources/assets/js/app.js’, ‘public/js’).vue({ options: { compilerOptions: { isCustomElement: (tag) => [‘md-linedivider’].includes(tag), }, }, }); UPDATE 4.8.22 – for Vite projects: vite.config.js import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => [‘md-linedivider’].includes(tag), } } }) ] })
Vue Router 4.x provides useRoute() for that: import { useRoute } from ‘vue-router’ export default { setup() { const route = useRoute() onMounted(() => { const id = route.params.id }) } } demo
Though Boussadjra Brahim’s solution works its not the exact answer to the question. In the sense that reactive data can not be reassigned with = but there is a way to reassign the reactive data. It is Object.assign. Therefore this should work setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) … Read more
Turns out it’s needed to specify secure flag to false like this: proxy: { ‘/api’: { target: ‘https://localhost:44305’, changeOrigin: true, secure: false, ws: true, } } Related github issue
In <template>: Getter only: {{ myVal }} <p v-text=”myVal” /> Getter and setter: <input v-model=”myVal”> Important: Do not use myVal.get() or myVal.set(value)! Use: getting: myVal setting (assignment): myVal = value In <script setup>: Getter only: const someReactiveRef = ref(null) const myVal = computed(() => someReactiveRef.value) Getter & setter: const someReactiveRef = ref(null) const myVal = … Read more
I ran into this issue today. The problem is that, when using the <script setup> pattern, none of the declared variables are returned. When you get a ref to the component, it’s just an empty object. The way to get around this is by using defineExpose in the setup block. // Child.vue <template> <div ref=”wrapper”> … Read more