Develop Reference

How can i use RouterLink to get to an external page in Vue3?

I'm working on a project with Vue3 to list all universities in Sweden and are having problems with RouterLink to take the user to an external page and the universities official webpage. Does any one have some tips to fix this problem?
This is my App.vue file:
<script>
import TheHeader from "./components/styling/TheHeader.vue";
import UniversityList from "./pages/universities/UniversityList.vue";
export default {
components: {
TheHeader,
UniversityList
}
}
</script>
<template>
<TheHeader />
<university-list v-for="res in universities"
:name="res.name"
:country="res.country"
:web_pages="res.web_pages"
></university-list>
<RouterView/>
</template>
<style>
#import url('https://fonts.googleapis.com/css2?family=Epilogue:wght#400;700&display=swap');
html {
font-family: 'Epilogue', sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
</style>
And this is UniversityList.vue
<template><ul>
<li v-for="university in universities">
<div class="info">
<h3>{{ university.name }}, {{ university.country }}</h3>
<RouterLink v-bind:to="university.web_pages">Källa</RouterLink>
</div>
</li>
</ul>
<RouterView/>
</template>
<script>
export default {
created() {
fetch('http://universities.hipolabs.com/search?country=Sweden')
.then((response) => response.json())
.then((result) => {
this.universities = result
})
},
data() {
return { universities: null}
},
props: ['name', 'country', 'web_pages']
}
</script>
<style>
body {
background-color: #dda15e;
}
.info {
max-width: 800px;
margin: 15px auto;
background: white;
border: 1px solid #424242;
border-radius: 12px;
padding-left: 20px;
}
h3 h4 {
margin: 1rem 0;
padding: 1rem;
}
</style>
Thanks in advance!

Router link only works in your project,
so you should use
anchor

You should just use anchor tag, RouterLink is for internal routes

How to pass data from one component to another component and store that data into an array in vue.js?

in my dashboard,i am displaying cards with some content(title & body)and the data is coming from backend api and that data is stores in notes[] array that is present inside the DisplayNotes.vue ,and each card contains some icons if the user clicks on any card TRASH-icon(for example: 4th card delete icon),the particular clickedTrashIcon card data should be passed to the DeleteNote.vue component and the data is stored inside the array called Trash which is present inside the DeleteNote.vue component ,please help me to fix this thing
DeleteNote.vue
<template>
<div class="Trash-section">
<div v-for="item in Trash" :key="item.id" class="container note">
<div class="delete-content">
<h5>{{item.title}}</h5>
<p>{{item.body}}</p>
<div class="icons Trash-icons">
<i class="fas fa-trash"></i>
<i class="fas fa-trash-restore"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DeleteNote',
data() {
return {
Trash: [{
id: 1,
title: 'Fundoo',
body: 'Trash component'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
]
}
}
}
</script>
<style scoped>
.icons {
margin-top: 12.2%;
margin-left: 5%;
opacity: 0.9;
}
.icons .fa-trash-restore {
padding-left: 25px;
}
.icons .fa-trash:hover {
font-size: 20px;
cursor: pointer;
}
.Trash-section {
margin-top: 5%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-around;
gap: 10px;
}
.container {
width: 22%;
margin-top: 5%;
margin-left: 18%;
margin-right: -15%;
box-shadow: 5px 5px 10px #e0dede;
float: left;
}
.container:hover {
box-shadow: 6px 6px 10px rgb(199, 199, 199);
}
h5 {
font-size: 20px;
font-weight: 400;
font-family: 'Times New Roman', Times, serif;
padding-left: 10px;
}
p {
font-size: 18px;
width: 90%;
height: 60px;
font-family: 'Times New Roman', Times, serif;
width: 100%;
padding: 7.5px 10px;
}
.Trash-icons {
visibility: hidden;
}
.note:hover .Trash-icons {
visibility: visible;
}
</style>
DisplayNotes.vue
<template>
<div class="carddisplay-section">
<div v-for="note in notes" :key="note.id" id="blur" class="container note">
<div #click="toggle(note.id)" class="card-content">
<h5>{{note.title}}</h5>
<p>{{note.body}}</p>
</div>
<div class="import-icons">
<icons class="imported-icons note-icons" />
<button v-if="flag" class="card-button" type="button" #click="handlesubmit();Togglebtn();">Close</button>
</div>
</div>
<div id="popup">
<UpdateNotes :cardId="clickedCard" :cardContent="cardContent" />
</div>
</div>
</template>
<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
name: 'DisplayNotes',
components: {
icons,
UpdateNotes
},
data() {
return {
flag: true,
notes: [{
id: 1,
title: 'Fundoo',
body: 'unlimited notes..'
}, ],
clickedCard: '',
cardContent: {},
}
},
methods: {
Togglebtn() {
this.flag = !this.flag;
},
async handlesubmit() {
service.userDisplayNotes().then(response => {
this.notes.push(...response.data);
})
},
toggle(id) {
var blur = document.getElementById('blur');
blur.classList.toggle('active');
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
var popup = document.getElementById('popup');
popup.classList.toggle('active');
},
}
}
</script>
<style lang="scss">
#import "#/styles/DisplayNotes.scss";
</style>
icons.vue
<template>
<div class="footer">
<i class="fas fa-bell"></i>
<i class="fas fa-user"></i>
<i class="fas fa-palette"></i>
<i clss="fas fa-image"></i>
<i class="fas fa-archive"></i>
<!-- <i class="fas fa-ellipsis-v"></i> -->
<i class="fas fa-trash"></i>
</div>
</template>
<style scoped>
.footer i {
opacity: 0.9;
position: relative;
}
.footer .fa-bell {
margin-top: 5px;
margin-left: 10px;
}
.footer .fa-user {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-palette {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-image {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-archive {
margin-top: 5px;
margin-left: 40px;
}
/* .footer .fa-ellipsis-v {
margin-top: 5px;
margin-left: 40px;
} */
.footer .fa-trash {
margin-top: 5px;
margin-left: 40px;
cursor:pointer;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
// import 'bootstrap/dist/css/bootstrap.min.css'
// import '#/assets/css/main.css'
//vuelidate
import vuelidate from 'vuelidate'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router'
import './service/axios'
import store from './store';
// import ('./src/Styles/Forget.css')
Vue.config.productionTip = false
Vue.use(vuelidate)
new Vue({
router,
render: h => h(App),
}).$mount('#app')

You should use Vuex for central state management. The workflow should be like this: you get the data from back-end via api and you store them in a array in your DisplayNotes.vue component and display them. Then you click on the trash icon in the card and get that values from your item from your array. You have to store "deleted item" values in vuex state variable via "Actions" and "Mutations" from vuex. For example "deletedItems". After you did it successfully, you can use "Getters" to get the values from your created variable in vuex store "deletedItems" in every component in your application.
Here is a quick example.
Install vuex at first and import them.
npm i vuex
create store.js file in the root folder of your application.
in your app.js or main.js etc. you have to import store.js file
import store from './store';
const app = new Vue({
el: '#app',
store,
render: r => r(App)
});
put this in your file store.js
import Vuex from 'vuex'
import Vue from 'vue'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
})],
state: {
deletedItems: [],
},
getters: {
deletedItems: state => {
return state.deletedItems
},
},
mutations: {
SET_DELETED_ITEMS(state, value) {
return state.deletedItems = value
},
},
actions: {
setDeletedItems({ commit }, value) {
commit('SET_DELETED_ITEMS', value);
},
},
});
To set values into a variable:
put this in vue component "DisplayNotes.vue
methods: {
deleteItem(){
this.$store.dispatch("setDeletedItems", itemValues);
}
}
To get values from vuex:
put this in your "DeletedNotes.vue"
import { mapState } from "vuex";
computed: {
...mapState(["deletedItems"]),
}
you can use them like:
console.log(this.deletedItems)
For more check this: https://vuex.vuejs.org/

How to implement so that when you click on an empty space, close the block

I have a regular block I want to do so that when you click on an empty space, this block closes here is a link to codesandbox
<template>
<div>
<div class="wrapper"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<style scoped>
.wrapper {
width: 300px;
height: 150px;
background: green;
margin: auto;
}
</style>

Using an event bus to communicate between window click event listener and the component should be one way to go.
You can work on top of this codesandbox

You could do something like this. Using a backdrop and detects when it got clicked. Is this what you want?
App.vue
<template>
<div id="app" class="backdrop" #click.self="showBox = !showBox">
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
<HelloWorld :showBox="showBox" msg="Hello Vue in CodeSandbox!" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
data: function () {
return {
showBox: true,
};
},
};
</script>
<style>
#app {
text-align: center;
margin-top: 40px;
}
.backdrop {
z-index: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
HelloWorld.vue
<template>
<div>
<div v-if="showBox" class="wrapper"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
showBox: Boolean,
},
};
</script>
<style scoped>
.wrapper {
width: 300px;
height: 150px;
background: green;
margin: auto;
}
</style>

How to add class from content of a variable in Vue.js

I want to pass a variable to a component which should be added as a class to a div. However, Vue adds the name of the variable instead of the content.
So I pass the prop color which contains red.
What I want: <div class="red">2</div>
What I get: <div class="color">2</div>
I think this is a noob question, so sorry for that. Maybe there is a better way to do this.
Thanks for helping me out.
Here are my components:
<template>
<div class="btn btn-outline-primary cell"
:class="{color}"
:id="id">
{{ number }}
</div>
</template>
<script>
export default {
name: "TileElement",
props: ["id", "number", "color"]
}
</script>
<style scoped>
.green {
color: green;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.cell {
display: inline-block;
float: left;
margin: 0.1em;
text-align: center;
background-color: lightgray;
width: 2.7em;
height: 2.7em;
}
</style>
Parent Component:
<template>
<div class="row">
<TileElement
v-for="tile in tiles"
v-bind:key="tile.id"
v-bind:number="tile.number"
v-bind:color="tile.color"
></TileElement>
</div>
</template>
<script>
import TileElement from './TileElement.vue';
export default {
name: "TileRow",
components: {
TileElement
},
data: function () {
return {
tiles: [
{id: 1, number: 1, color: "green"},
{id: 2, number: 2, color: "red"},
{id: 3, number: 3, color: "yellos"}
]
}
}
}
</script>

If you just need to pass a class, without any conditions or other such stuff, then you can simple use array for one and any other number of classes:
<div :class="[color]"></div>
But that's not only you can do.
https://v2.vuejs.org/v2/guide/class-and-style.html

:class="color" will also work:
var vm = new Vue({
el: '#app',
data() {
return {
color: 'red'
};
}
});
.cell { width: 50px; height: 50px; }
.red { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
<div class="cell" :class="color"></div>
</div>

Try dynamically importing the class name
:class="{[color]: true}"

How to pass data from vue instance to component

My Vue is not rendering the branches data property. How can I pass data from the root Vue to the Hello.vue component? I have tried v-bind and passdata but nothing seems to be working. Any help is highly appreciated.
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.use(require('vue-resource'))
var esquery = require('./query')
Vue.config.productionTip = false
/* eslint-disable no-new */
var app= new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
data: {
branches: ''
},
methods: {
search1: function () {
var self=this
alert('hi')
esquery.search().then(function(val){
self.branches=val.hits.hits[0]._source
alert(JSON.stringify(self.branches))
})
}
}
})
app.search1()
//alert (JSON.stringify(branches))
App.vue
<template>
<div id="app">
<router-view> </router-view>
</div>
</template>
<script>
export default {
name: 'app',
props: ['branches']
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Design your application smartly</h2>
<table>
<tr> Branches </tr>
<td v-for="branch in branches" :branches="branches"> {{ branch.branchname }}</td>
</table>
</div>
</template>
<script>
export default {
name: 'hello',
props: ['branches'],
data () {
return {
msg: 'Welcome to Html'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>