Here's my code (ERROR):
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
it outputs an error message:
[Vue warn]: Property or method "v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
When I use $refs method to create modal, it works :
<template lang="pug">
b-button(#click="showModal")
i.fa.fa-calendar
b-modal(ref="myModalRef" hide-footer title="some title")
span Hello form my modal
</template>
<script>
...
methods: {
showModal() {
this.$refs.myModalRef.show();
},
}
...
</script>
Here's my main App.js with BootstrapVue installed
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'font-awesome/css/font-awesome.min.css';
import Vue from 'vue';
import Moment from 'vue-moment';
import BootstrapVue from 'bootstrap-vue';
import DatePicker from 'vue2-datepicker';
import './assets/bootstrap.cosmo.min.css';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(Moment);
Vue.use(DatePicker);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
I just following the manual here: https://bootstrap-vue.js.org/docs/components/modal/
So far I have problem until I want to show some modal.
What's wrong with me?
The problem is pug. In:
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
The line:
b-btn(v-b-modal.myModal)
Messes things up. Use:
b-btn(v-b-modal.myModal="")
Reason:
b-btn(v-b-modal.myModal) creates <b-btn v-b-modal.myModal="v-b-modal.myModal">, which makes Vue search for that falue. Using b-btn(v-b-modal.myModal="") creates <b-btn v-b-modal.myModal=""> which solves the problem.
More: https://github.com/pugjs/pug/issues/370#issuecomment-2399051
Related
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...
I have the following code...
import Vue from 'vue';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import App from './app/App.vue';
Vue.use(VueMaterial)
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
But when I try to use the drawer like this...
<md-table>
<md-table-row>
<md-table-head md-numeric>ID</md-table-head>
<md-table-head>Name</md-table-head>
<md-table-head>Email</md-table-head>
<md-table-head>Gender</md-table-head>
<md-table-head>Job Title</md-table-head>
</md-table-row>
</md-table>
I get...
Unknown custom element: <md-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
And nothing renders.
I am using vue-form-generator and trying to get it to render a simple form without success. I am going to re-use this generator in dozens of files as my application is form heavy and would like to make this global and I'll just manage everything in components.
main.js file
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.use("VueFormGenerator", VueFormGenerator);
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
I have a larger template that uses this template for most of the page, this is the template file where I am trying to use VueFormGenerator
NewTrade.vue
<template>
<div>
<p class="introText">Please try to stick to your strategy and use the Manual mode as little as possible if at all! </p>
<form action="#">
<VueFormGenerator
:schema="schema"
:model="model"
/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
model: {
name: "David Johnson"
},
schema: {
fields: [
{
name: "text"
}
]
}
}
}
}
</script>
This is the error I get in Chrome.
[Vue warn]: Unknown custom element: <VueFormGenerator> - did you register
the component correctly? For recursive components, make sure to provide the
"name" option.
found in
---> <NewTrade> at src/components/NewTrade.vue
<Trading> at src/components/Trading.vue
<App> at src/App.vue
<Root>
just use component instead of use
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.component("VueFormGenerator ", VueFormGenerator); // <-- component instead of use
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Usually you'd use vue-form-generator instead of VueFormGenerator as the component name here and in template, as that's the convention, but you only need that when you compile run-time.
here is a working example: https://codesandbox.io/s/o77lmqq9v6
I tried to use the plugin for a project with Vue 2 but got a Vue warn like below.
[Vue warn]: Failed to mount component: template or render function not
defined
Inside vue component:
import ToggleButton from 'vue-js-toggle-button'
export default {
components: { ToggleButton }
}
Then,
<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/>
The plugin is not that popular and any help would be much appreciated.
You don't export the toggle button into another component. You import it in whatever component you want to use it and tell Vue to use it with Vue.use(ToggleButton). Then you can use it inside your component's template and export that whole component afterwards!
Example would be:
<template>
<toggle-button #someOfYourValues#></toggle-button>
</template>
In here, you don't import anything of the ToggleButton! You just use it as a tag inside your components!
Let's move on to your main js file where all the Vue instance creation takes place. Usually, it looks similar to this:
<script>
import Vue from 'vue'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
new Vue({
el: #yourDivInTheBaseHTMLFile
# some other stuff for your vue instance
})
</script>
I tested it inside my own current Vue project, which is a todo list with lots of components. It literally works inside every single one of them when you do a Vue.use().
If needed, I can link you to the project so you can have a look, but this simple explanation should do it ;)
For completeness (Vue SFC Class):
src/main.ts:
import Vue from 'vue';
import ToggleButton from 'vue-js-toggle-button';
Vue.use(ToggleButton);
new Vue({
...
render: h => h(App)
}).$mount('#app');
src/components/MyComponent.vue:
<template>
<toggle-button />
</template>
<script lang="ts">
import { ... } from "vue-property-decorator";
// do NOT import the component in here
#Component({
components: {
// do NOT declare the component in here
}
})
export default class MyComponent extends Vue {
}
</script>
<style scoped lang="scss">
</style>
Am using vuetify to build a template but am getting an error
unknown custom element dashboard did you register the component correctly?
This is my code:
In the main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
In my App.vue
<template>
<dashboard></dashboard>
</template>
<script>
import Dashbaord from './components/dashboard/Dashboard.vue';
export default {
name: "appinit",
components: {
"dashboard":Dashboard
}
}
And here is my dashboard
<template>
<v-app>
<left-drawer></left-drawer>
<toolbar></toolbar> <!-- Dashboard Toolbar-->
<main>
<v-container fluid>
..info are
</v-slide-y-transition>
</v-container>
</main>
<right-drawer></right-drawer>
<footer-area></footer-area>
</v-app>
</template>
<script>
imports ......
export default {
components: {
Toolbar, RightDrawer,LeftDrawer,FooterArea
}
}
What could be wrong as i have just separated the initial vuefy installation component into different component sections
The code is available at github on This link
What could be wrong?
You have few issues in your code.
You have to close tag in App.vue
Fix typo App.vue line 6 "Dashboard"
Remove footer-area from Dashboard.Vue (you don't have that component, yet ;) )