We Keep Coding

Vue 3 components not importing other vue components

My Vue component navbar.vue does not import other components.
This is Vue 3 with the Option API.
All of the components are imported by index.js in the component folder
import navbar from '#/components/navbar.vue'
import btn from '#/components/btn.vue'
export {
navbar,
btn
}
This is the navbar.vue:
<template>
<header class="navbar">
<ul>
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<btn></btn>
</li>
</ul>
</header>
</template>
<script>
import { btn } from '#/components'
export default {
name: 'navbar',
components: {
btn
}
}
</script>
This is the btn.vue components:
<template>
<button class="btn" #click="$emit('click')">
<slot/>
</button>
</template>
<script>
export default {
name: 'btn'
}
</script>

Your index.js exported navbar and btn. And also you have already exported another component from navbar.vue in same file level. So make a separate folder for navbar and btn or change the export name.
I am new to frameworks. Hope this will work.

Why props given from parent don't actualise in child VueJS?

I am a beginner in VueJS and I am facing a problem.
Here in main.js I pass the user variable to App.vue via a props.
By default its value is {}
In main.js the getLoginStatus() method listens to the firebase authentication status, when a user logs in or out main.js.this.user changes.
user in main.js is passed to App.vue thanks to template, but when it changes as a result of the getLoginStatus() call it is not changed in App.vue (the child), whereas in main.js it does change.
How can this be done?
Thanks
My main.js :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from "firebase";
Vue.config.productionTip = false
var firebaseConfig = {
CONFIGURATION
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
new Vue({
el: '#app',
router,
template: '<App :user="user" ></App>',
components: { App },
data(){
return {
user : {}
}
},
methods:{
getLoginStatus(){
firebase.auth().onAuthStateChanged(function(u) {
if (u) {
this.user = u
console.log("// User is signed in by Phone Number : ", u.phoneNumber)
} else {
this.user = null
console.log("// No user is signed in.")
}
});
console.log("this.user new value : "+this.user);
},
},
updated(){
this.getLoginStatus()
},
created(){
this.getLoginStatus()
}
})
App.vue :
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/register">Register/About old</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/dashboard">Dashboard</router-link>
</li>
<li class="nav-item">
<button class="nav-link btn" #click="logout">Logout</button>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<router-view />
</div>
<p v-if="user">logged{{user}}</p>
<p v-else>not logged{{user}}</p>
</div>
</template>
<script>
import firebase from 'firebase'
export default {
name: 'app',
props: ['user'],
methods:{
logout() {
firebase
.auth()
.signOut()
.then(() => {
alert('Successfully logged out');
if(this.$router.currentRoute.path!='/'){
this.$router.push('/')
}
})
.catch(error => {
alert(error.message);
if(this.$router.currentRoute.path!='/'){
this.$router.push('/')
}
});
},
},
}
</script>

You're using an unbound function here:
firebase.auth().onAuthStateChanged(function(u) {
So when setting this.user inside this function, this is not pointing to your Vue instance. You can either .bind(this) your function or just use an arrow function which will auto bind:
firebase.auth().onAuthStateChanged(u => {

What causes the duplicated key error in this Vue.js application?

I am working on a small Todo App with Vue 3.
In App.vue I have the 3 child components and the methods:
<template>
<div id="app">
<Header/>
<List/>
<Footer/>
</div>
</template>
<script>
import axios from 'axios'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
List,
Footer
},
props: ['todos'],
data() {
return {
url: "https://jsonplaceholder.typicode.com/todos?&_limit=5",
dataIsLoaded: false,
isValidInput: true,
todos: [],
unsolvedTodos: [],
newTitle: "",
}
}
}
</script>
In List.vue I have:
<template>
<div>
<h1>List</h1>
<ul class="todo-list" v-if="dataIsLoaded">
<TodoItem v-for="todo in todos.slice().reverse()" :key="todo.id" v-bind:class="{done: todo.completed}" :todo="todo" />
</ul>
</div>
</template>
<script>
import TodoItem from "./TodoItem.vue";
export default {
name: 'List',
components: { TodoItem },
props: ['todos']
}
</script>
In TodoItem.vue:
<template>
<li>
<input type="checkbox" :checked="todo.completed" #change="toggleTodo(todo)" />
<span class="title">{{todo.title}}</span>
<button #click="deleteTodo(todo.id)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</li>
</template>
<script>
export default {
name: 'TodoItem',
props: ['todo']
}
</script>
The todo list's <h1> heading is displayed, but the unordered list of todos is not.
Introducing props: ['todos'] in App.vue throws the error Duplicated key 'todos'.
What am I missing?

On your App.vue you defined props['todos'] and at the same time todos is defined in your data(). That might be the one causing the error.

Looks like you forgot to define dataIsLoaded in List.vue. It either needs to be defined in data or be a computed property.

Vuejs: Displaying Selected Item On a Page You are On

I need some help displaying a selected an item on the page you are on. I have three component Home, Product, and Index. The Index component is Global component which have a list of items with a route-link attached to them to got to the Product Page (Component) and display the item that was click. I am passing the item in the route-link as params to be able to access the item on the Product page. I am using the Index Component on the Home component to display all item. And when I click an item from the Index component from the Home page, it go to the Product page and display that item. That part is working fine, but when I am on the Product page and I click an item from the Index component, it is not displaying the clicked item in the Product page. I really need some help how to solve this problem.
Main.js code
import Vue from 'vue'
import App from './App'
import router from './router/routes'
import Index from './components/Index'
Vue.component('list-items', Index)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
Route.js File
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../pages/Home'
import Product from '../pages/Product'
Vue.use(Router)
export default new Router({
routes: [
{
path: '' || '/',
name: 'Home',
component: Home
},
{
path: '/product',
name: 'Product',
component: Product,
props: true
}
],
mode: 'history'
})
Home.vue component
<template>
<div class="container-fluid p-0">
<list-items />
</div>
</template>
<script>
export default {
name: 'Home',
data: () => ({
})
}
Product.vue component
<template>
<div class="container-fluid p-0">
<div class="container-fluid py-5">
<div class="row">
<div class="col-md-7">
<div class="col-md-12">
<img v-bind:src="item.url" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4 margin-padding-right">
<div class="col-md-12">
<h3>{{$route.params.product.name}}</h3>
<h5 class="price">${{item.price}}</h5>
</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="col-md-12 related-item">
<h5>Related Items</h5>
</div>
<list-items />
</div>
</div>
</div>
<script>
export default {
name: 'Product',
props: ['product'],
data: () => ({
quantity: 1,
item: {
name: '',
url: ''
}
}),
mounted () {
if (this.product) {
this.item.name = this.product.name
this.item.url = this.product.image
}
},
watch: {
change: function (newValue, oldValue) {
this.item.name = newValue.product.name
}
}
}
</script>
<style lang="scss" scoped>
</style>
This is an image of what I am trying to achieve.

Vue/Vuecli3 - How to route from one component to another with parameters

I'm running into an issue when trying to redirect from one component to another. It appears that it's not routing to the URL thats specified in my router to the desired component and is staying on my home page instead. I can't figure out where the error is occuring.
I'm using the Vue CLI version 3.
Below is my index.js, Home.vue and Model.vue
Then under that is images of the Home.vue then it shows what happens when I try to redirect to the link in my href tag.
You can see that it's not going to the other component and it's staying on my home page.
Any ideas on whats causing the issue here? Thanks!
/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Homefrom '#/components/Home'
import Model from '#/components/Model'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/model/:model_tag_name',
name: 'Model',
component: Model
// props: true
}
]
})
/components/Home.vue
<template>
<div class="hello container-fluid">
<h1>{{msg}}</h1>
<div class="row">
<div class="col-4 text-left">
<ol>
<li v-for="tag in tags" v-bind:key="tag.model_tag_name">
<a :href="'/model/'+ tag.model_tag_name"> {{tag.model_tag_name}}</a>
</li>
</ol>
</div>
<div class="col-8">
<p>Data</p>
</div>
</div>
</div>
</template>
<script>
var axios = require('axios');
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App',
tags: []
}
},
mounted: function() {
var url = 'http://10.0.0.5:5000';
console.log(url)
axios.get(url + '/')
.then((response) => {
console.log(response.data);
this.tags = [{"model_tag_name": response.data}];
})
.catch(function(error) {
console.log(error);
});
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
a {
color: #42b983;
}
</style>
/components/Model.vue
<template>
<div class="container-fluid">
<h1> Model </h1>
</div>
</template>
<script>
var axios = require('axios');
export default {
name: 'Model',
data () {
return {
model_tag_name: this.$route.params.model_tag_name
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
a {
color: #42b983;
}
</style>
http://localhost:8080/
Then this is what happenes when I click the href link on the home page. It's redirecting back to the home page even though the URL matches the routerview for Model.vue

Pleas update this code in /components/Home.vue
<li v-for="tag in tags" v-bind:key="tag.model_tag_name">
<router-link :to="{ name: 'Model', params: { model_tag_name: tag.model_tag_name}}">
{{tag.model_tag_name}}</router-link>
</li>