Sorry, my English is so bad!
File: app.js
window.auth_id = 0;
Vue.component('block-header-user-control', require('./HeaderComponent.vue'));
new Vue({
el: '#application'
});
File HeaderComponent.vue
<template lang="html">
<header-guest v-if="!auth"></header-guest>
<header-auth v-else></header-auth>
</template>
<script>
import HeaderGuest from './HeaderUserGuest.vue';
import HeaderAuth from './HeaderUserAuth.vue';
export default {
data: function () {
return {
auth: window.auth_id
}
},
components: {
'header-guest': HeaderGuest,
'header-auth': HeaderAuth,
},
methods: {},
}
</script>
File: HeaderUserGuest.vue
<script>
export default {
template: '#header-user-auth', // Not working,
// template: `<div>cascaaSA</div>`, // working
data() {
return {}
},
mounted() {
console.log('Created Guest');
},
}
</script>
File: HeaderUserAuth.vue
<script>
export default {
template: '#header-user-auth',
name: 'header-auth',
data() {
return {}
},
created() {
console.log('Created Auth');
},
}
</script>
File: index.blade.php
<div id="application">
<script type="text/x-template" id="header-user-guest">
Guest
</script>
<script type="text/x-template" id="header-user-auth">
Logged
</script>
<block-header-user-control></block-header-user-control>
</div>
"Created Guest" is displayed in browser console, but the "block-header-user-control" menu does not display "Guest".
Please help me. SPECIAL THANKS!!
====================
Thank all! It worked with html. Text not working
<div id="application">
<script type="text/x-template" id="header-user-guest">
<div>Guest</div>
</script>
<script type="text/x-template" id="header-user-auth">
<div>Logged</div>
</script>
<block-header-user-control></block-header-user-control>
</div>
You might need to move your templates outside of the scope of the application - move them below #application.
Related
Need help , i can get all data from response api but having some problem when try to get data (looping data ) from key "get_item_cards" . Here's my response and code in vue js
Response api
<script setup>
<script>
import axios from 'axios'
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
// console.log('Page mounted');
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes
console.log(this.cardNotes);
})
}
}
}
</script>
how the best way to get all data & each data from relationship in vue js 3
Since the this.cardNote returns an array with three elements, you can use loop using v-for and access to the get_item_cards array like below,
<template>
<div>
<div v-for=(note, index) in cardNote>
<p>{{node.cardname}}</p>
<div v-for=(item, key) in note.get_item_cards>
<p>{{item.content}}</p>
</div>
</div>
</div>
</template>
<script setup>
<script>
import axios from 'axios'
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
// console.log('Page mounted');
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes
console.log(this.cardNotes);
})
}
}
}
</script>
I try to change the structure of my .vue files (used with laravel) from the working version as seen here:
OLD foo-component.vue:
<script>
Vue.component("foo-component", {
data() {
},
props: {
},
methods: {
},
template: `
<div> Some Content Here </div>
`
});
</script>
switch this to the other structure for .vue files:
NEW: foo-component.vue:
<template>
<div> Some Content Here </div>
</template>
<script>
export default {
name: 'foo-component',
data() {
},
props: {
},
methods: {
},
}
</script>
OLD: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
NEW: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
But with that I get an error in the browser saying:
[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I then added 'foo-component' to the components: {OtherComponents, foo-component} but then things got messy and the browser is saying:
Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)
What am I doing wrong?
Here's the HTML/View where I call the foo-component inside the laravel blade home.blade.php:
<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
You have to register your components in app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
The way I got it working is an update to app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
import FooComponent from './components/foo-component.vue';
const app = new Vue({
el: '#app',
components: {
OtherComponents,
'foo-component': FooComponent
},
data:{
},
methods: {
}
});
I am trying to build vue js applications but I am getting following errors .
Severity Code Description Project File Line Suppression State
Warning TS1005 (JS) ':' expected. VuejsApp JavaScript Content Files C:\Users\Khundokar Nirjor\Documents\Visual Studio 2017\Projects\VuejsApp\VuejsApp\src\App.vue 19 Active
This is Home.vue code
<template>
<div id="databinding">
<div id="counter-event-example">
<p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter v-for="(item, index) in languages"
v-bind:item="item"
v-bind:index="index"
v-on:showlanguage="languagedisp"></button-counter>
</div>
</div>
</template>
<script>
// import Home from './components/Home.vue';
// import component1 from './components/component1.vue';
export default {
name: 'app',
Vue.components('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props: ['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
};
</script>
<style>
</style>
I want to display list of buttons and when i clicked the any of them button , I want to display the message that button is clicked.
I believe your error is related to the component. First, the function name is wrong. The correct name is Vue.component and it is Vue.components. Second, your component declaration is not correct.
I created this codepen where you can see how to declare the component globally and locally.
const buttonCounter = {
template:
`<button #click="displayLanguage(item)">
<span style="font-size:25px;">{{ item }}</span>
</button>`,
props: ["item"],
methods: {
displayLanguage: function(lng) {
this.$emit("show-language", lng);
}
}
}
// Declare your component globally, will be able to access it in any another component in the application
Vue.component("button-counter", buttonCounter );
new Vue({
el: "#databinding",
// declarete your component locally, it only will be available inside this context
components:{
'button-counter-2' : buttonCounter
},
data: function() {
return {
languageclicked: "",
languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
};
},
methods: {
languageDisp: function(a) {
this.languageclicked = a;
}
}
});
body {
margin: 20px;
}
.btn-wrapper {
display: flex;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
<div id="counter-event-example">
<p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<div class="btn-wrapper">
<button-counter v-for="(item, index) in languages" :item="item" :key="item" #show-language="languageDisp"/>
</div>
<button-counter-2 v-for="(item, index) in languages" :item="item" :key="item" #show-language="languageDisp"/>
</div>
</div>
I am using VueJS with Laravel, when I create Vue component and export it, it works perfect, but when I use export default in my Laravel blade in script #section it's not working.
App.js
require('./bootstrap');
window.Vue = require('vue');
// import 'swiper/dist/css/swiper.css'
import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('vehicle-offers-block', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('latest-news-block', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('finance-calculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('latest-offers-block', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('all-companies-block', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('brand-vehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('model-topCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('model-insideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('trim-specifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('all-offers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('main-footer', require('./components/frontend/MainFooter.vue'));
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);
const app = new Vue({
el: '#app'
});
App.blade.php
Here I created by scripts section
<body>
<!-- START NAV -->
#include ('admin.layouts.topnav')
<!-- END NAV -->
<div class="container">
<div class="columns">
<div class="column is-3">
#include ('admin.layouts.sidenav')
</div>
<div class="column is-9">
<div id="app">
#yield('content')
</div>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</div>
</body>
Larave Blade File
Here i am exporting vue js in laravel blade
#section('scripts')
<script>
export default {
data() {
return {
companyid: "",
offers: {},
SigleOfferCoverSwiper: {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
mounted () {
this.getOffers();
},
methods: {
getOffers () {
axios.get(`/api/brands/${this.companyid}/offers`).then(response => {
this.offers = response.data.offers
})
}
}
};
</script>
#endsection
Please guy help me with this.
Thanks
Seems you need to setup default for your require declaration:
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue').default);
Because in some cases you can face some problems with ES6 export.
Also you can use module.exports = {}.
In resources/assets/js/app.js I have created eventHub Vue instance:
require('./bootstrap');
var eventHub = new Vue();
Vue.component('todos-list', require('./components/todos/TodoList.vue'));
Vue.component('todos-add', require('./components/todos/TodoAdd.vue'));
const app = new Vue({
el: '#app'
});
How can I use it in components that are created in separate .vue files?
For example, I also have two components:
todos-list located in /components/todos/TodoList.vue, which is used to fetch the data from server-side using vue-resource:
<template id="todos-list-template">
<div>
<ul v-if="todos.length > 0">
<li v-for="todo in todos">
{{ todo.title }}
</li>
</ul>
<p v-else>You don't hanve any Todos.</p>
</div>
</template>
<script>
export default {
template: '#todos-list-template',
data() {
return {
todos: {}
}
},
mounted() {
this.$http.get('api/vue/todos').then(function(response) {
this.todos = response.data;
});
},
methods: {
handleAddedTodo: function(new_todo) {
this.todos.push(new_todo);
}
},
created: function() {
eventHub.$on('add', this.handleAddedTodo);
},
destroyed: function() {
eventHub.$off('add', this.handleAddedTodo);
}
}
</script>
todos-add located in /components/todos/TodoAdd.vue which is used to add (save) the new 'todo' using vue-resource:
<template id="todos-add-template">
<div>
<form v-on:submit.prevent="addNewTodo()">
<div class="form-group">
<input v-model="newTodo.title" class="form-control" placeholder="Add a new Todo">
</div>
<div class="form-group">
<button>Add Todo</button>
</div>
</form>
</div>
</template>
<script>
export default {
template: '#todos-add-template',
data() {
return {
newTodo: { id: null, title: this.title, completed: false }
}
},
methods: {
addNewTodo() {
this.$http.post('api/vue/todos', { title: this.newTodo.title }).then(function(response) {
if (response.status == 201) {
eventHub.$emit('add', response.data);
this.newTodo = { id: null, title: this.title, completed: false }
}
}, function(response) {
console.log(response.status + ' - '+ response.statusText);
})
}
}
}
</script>
When I add (save) new 'todo' using the todos-add component (TodoAdd.vue) - I want to update data in todos-list component. If I understood well the documentation - for component communication we need to use centralized event hub. And that's what I tried - but I am getting the following error:
eventHub is not defined
I guess because it is defined in app.js, but how can I use in components that are created in separate .vue files?
You are getting this error because eventHub is actually not defined where you are using it. You have to export this from app.js and import in TodoAdd.vue.
in app.js:
var eventHub = new Vue()
exports.eventHub = eventHub
Add this code in TodoAdd.vue:
<script>
import eventHub from '/path/of/app'
export default {
template: '#todos-list-template',
This should make eventHub availble in TodoAdd.vue.
Edited
As the comment suggests, you may consider using vuex, as you have data whcih is being used across components, and going forward I see chances of getting it more complex, more event handlers and event listerners, which can quickly become a nightmare to manage.
var eventHub = new Vue()
You are getting this error because eventHub is actually not defined where you are using it. You have to export this from app.js file. Use this one
window.eventHub = new Vue()