Property "dynamicslotname" was accessed during render but is not defined on instance. at in vue3.
I am testing the dynamic slot of vue3, but i missing the question "Property "dynamicslotname" was accessed during render but is not defined on instance. at "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicSlotName]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicSlotName: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
The slot name should be written in lowercase not in camelCase like dynamicslotname instead of dynamicSlotName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicslotname]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicslotname: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
For more details please check https://v3.vuejs.org/guide/template-syntax.html#caveats
Related
I am new to Vue.js. I want to add header, content and footer to the page using components. I get an extra div in the code - how can I remove it?
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<header></header>
<main role="content"></main>
<footer></footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
Additional question: how to make another layout for the login page? There will be no header and footer on this page.
Source files
index.html
<!doctype html>
<html class="h-full" lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
App.vue
<template>
<Layout>
<template v-slot:header>
<Header/>
</template>
<router-view></router-view>
<template v-slot:footer>
<Footer/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/TheLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
components: {
Layout,
Header,
Footer
},
}
</script>
TheLayout.vue
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {}
</script>
<div> can not be removed.
You can use computed properties for another layout.
<template>
<Layout>
<template #header>
<Header v-if="isBoard"/>
</template>
<router-view></router-view>
<template #footer>
<Footer v-if="isBoard"/>
</template>
</Layout>
</template>
<script>
import Layout from './layouts/BaseLayout'
import Header from './components/TheHeader'
import Footer from './components/TheFooter'
export default {
computed: {
isBoard() {
return this.$route.name === 'Board'
}
},
components: {
Layout,
Header,
Footer
},
}
</script>
I'm new on vue.js but I can not understand why it still says {{ title }} instead Hello world!
new Vue({
el:'#app',
data: {
title:"Hello World!"
}
});
<html>
<head>
<title></title>
</head>
<body>
<div id="#app">
{{ title }}
</div>
<script src="/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</body>
</html>
I can not understand what is wrong but I'm just copying and pasting from tutorial
You have to remove the # in <div id="#app">
Here is the full code :
new Vue({
el:'#app',
data:
{
title:"Hello World!"
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<p> {{ title }} </p>
</div>
<script src="script.js"></script>
</body>
</html>
<html>
# means id, you don't need to put id="#app", that's repetitive.
Besides that, you should load vue before you use new Vue.
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ title }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
title: "Hello World"
}
}
});
</script>
</body>
</html>
I use Windows, here I included script for vue, I didn't install vue, just use script.
The title of page is visible, yet "Hello vue" is not shown.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Vue-basis</title>
</head>
<body>
<script>
<div id="app">
<h1>Hello Vue</h1>
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
I can't understand should I create new instance of vue, or I can use one instance and put in it all needed components. If yes, how I can do it. Here is my code:
window.onload = function() {
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: '#loginmenu' //how pass another templates here??
})
}
In your main file, for example index.html, add a main js file, app.js in your app.js include all of your components. Something like this
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<loginmenu></loginmenu>
<pagefooter></pagefooter>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: 'body',
components: {
'loginmenu': loginMenu,
'pagefooter', pageFooter
}
})