I have a url key in my json file and there are values against it. When I create a button with vue.js and click this button, I want the url to be opened. How can I do it?
My code:
<template>
<div class="q-pa-md q-gutter-sm">
<q-btn #click="gotoUrl" color="white" text-color="black" label="Standard" />
</div>
</template>
<script>
import json from './assets/test.json'
export default defJson({
setup: () => ({jsonData}),
methods: {
gotoUrl(){
window.open()
}
}
})
</script>
Json file:
[
{
"id": "1",
"name": "stackoverflow",
"url": "https://stackoverflow.com/"
}
]
When I click this button, the link needs to be read and opened in the json file.
First you wan to loop over the objects in your JSON array like this:
<div v-for="site in jsonData" :key="site.id" class="q-pa-md q-gutter-sm">
...
</div>
Then you can simply create elements around your buttons with the url from the site in the href:
<div v-for="site in jsonData" :key="site.id" class="q-pa-md q-gutter-sm">
<a :href="site.url" target="_blank">
<q-btn color="white" text-color="black" :label="site.name" />
</a>
</div>
Its pretty basic vue stuff.. They have great documentation, check it out: https://vuejs.org/guide/introduction.html
Related
Ive been trying to create a little slideshow that uses an array of objects to display the image, as well as the photographer and the url so that there are proper credits for the images. I can get the first image to display, as well as the credits, but nothing happens upon clicking the buttons. I have tried to format the JavaScript several different ways but am still not sure what is wrong with it. I am new to VUE apps and have only been experimenting for about a month and am not sure what I am doing wrong. This is currently in a separate component, which I have not had trouble with before. I have placed the code below.
<script setup>
import { ref, reactive } from 'vue'
import { watch } from 'vue'
import { onMounted } from 'vue'
let photo = [
{
name: "Tall Brown Trees",
photographer: "Darwis Alwan",
photographer_url: "https://www.pexels.com/#darwisalwan/",
url: "https://www.pexels.com/photo/tall-brown-trees-1995730/",
img: "/pexels-darwis-alwan-1995730.jpg"
},
{
name: "Photo of Forest During Daytime",
photographer: "Yaroslav Shuraev",
photographer_url: "https://www.pexels.com/#yaroslav-shuraev/",
url: "https://www.pexels.com/photo/photo-of-forest-during-daytime-1834393/",
img: "/pexels-yaroslav-shuraev-1834393.jpg"
}
]
let counter = 0;
function next(counter) {
if (counter == 1){
exit;
} else {
counter++;
}
}
function previous(counter){
if (counter == 0){
exit;
} else {
counter--;
}
}
</script>
The template isnt too complicated, but I have listed it below as well
<template>
<div id="imgBox">
<button id="previous" class="btn" role="button" type="button" v-on:click.native="counter++"><--</button>
<img id="image" :src="photo[counter].img">
<button id="next" class="btn" role="button" type="button" #click="counter--">--></button>
<br>
<div id="photoInfo">
<div id="info">
{{ photo[counter].title }} <br>
<a id="photographer" :href="photo[counter].photographer_url" target="_blank"> {{ photo[counter].photographer }} </a>
<br></div>
<div id="info2">
{{ photo[counter].photographer_url }}
</div>
</div>
</div>
</template>
I have tried to use both v-on:click="previous" to use the previous buttons, then changed it to try using v-on:click.native="counter++". One is supposed to change the counter using a function called "previous" while the other attempt was supposed to change the counter directly. I have looked into different ways to format it, but every way that I try it either does not work, or breaks my code so I can no longer view it on local host.
I have a React component that maps data from a .js file, containing objects in the array. How can I link my title and images from within this function to access respective pages?
In this file, I am getting errors for every [x] used for linking img src to the info.js file
Is there a different way to link an img from a js array?
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Card from "./Card";
import Btt from "./BackToTop";
import info from "../info";
function Bolt() {
return(
<div>
<Header />
<div>
<h1 className="projHead">Bolt</h1>
<div className="card-img-top"><img src={info.[1].src} alt="" className="banner"></img>
</div>
</div>
<div className="text1">
<h3>Mind Map</h3>
</div>
<div className="card-img-top"><img src={info.[1].pic1} alt="" className="isoimg"></img></div>
<div className="card-img-top"><img src={info.[1].pic2} alt="" className="isoimg"></img></div>
<div className="card-img-top"><img src={info.[1].pic3} alt="" className="isoimg"></img></div>
<div className="card-img-top"><img src={info.[1].pic4} alt="" className="isoimg"></img></div>
<div className="text1">
<h3>Screen Layouts</h3>
</div>
<div className="card-img-top"><img src={info.[1].pic5} alt="" className="isoimg"></img></div>
<div className="text1">
<h3>Mockups</h3>
</div>
<div className="card-img-top"><img src={info.[1].pic6} alt="" className="smallisoimg"></img></div>
<Btt />
<Footer />
</div>
);
}
export default Bolt;
this is the JS file for content
const info = [
{
id: 1,
title: "AR mirror",
about: "Smart Exercise Mirror is an IOT product. It helps the user to have a gym-like experience at their home with the help of AR and image recognition technology. ",
src: "images/AR_Mirror/AR_mirror.png",
tag1: "UX & Product design",
link: "/ARmirror",
targ: "_self",
pic1: "images/AR_Mirror/ar1.jpg",
pic2: "images/AR_Mirror/ar2.png",
pic3: "images/AR_Mirror/ar3.png",
pic4: "images/AR_Mirror/ar4.png",
pic5: "images/AR_Mirror/ar5.gif",
pic6: "images/AR_Mirror/ar6.png",
vid: "images/AR_Mirror/AR_mirror.MOV",
},
{
id: 2,
title: "Bolt",
about: "Bolt is an app for electric bikes which allows user to monitor the bike from remote distance and functions as a control panel.",
src: "images/Bolt/Bolt.jpg",
tag1: "UX design",
link: "/Bolt",
targ: "_self",
pic1: "images/Bolt/bs1.png",
pic2: "images/Bolt/bs2.png",
pic3: "images/Bolt/bs3.png",
pic4: "images/Bolt/bs4.png",
pic5: "images/Bolt/bs5.png",
pic6: "images/Bolt/bs6.gif",
}
];
export default info;
I believe, this syntax (info.[1]) is wrong. That's why you have errors.
You should change it to info[1]. Thats orthodox way of accessing array elements by their indices.
Other than this, you should better use map or foreach iterating over array.
In that case just replace
info.[1].pic1
to
info?.[1]?.pic1
If you doing it static then its fine.
But in future if you are using more data it will be better to use For-loop or Map because it's better way to use array data
I have a popover menu in my header displaying products. When clicking on the first one, regardless of which one on the list, it navigates correctly to the path "products/some-product". But if I'm on one of the product pages already, and I'm trying to navigate to another product it adds the "products/" again in the URL. E.g. "products/products/some-product".
I'm using Next.js 11 and Link.
Below is part of my code handling the list of products with navigation:
<div>
{products.map((item) => (
<Link href={`products/${item.href}`}>
<a
key={item.name}
>
<div>
<item.icon
aria-hidden="true"
/>
</div>
<div>
<p>
{item.name}
</p>
<p>
{item.description}
</p>
</div>
</a>
</Link>
))}
</div>
I have a menuData.jsx component to keep track of all my products, which I then import to the file above. Here is an example from the menuData.jsx file:
export const products = [
{
name: "some-product",
description:
"Some description",
icon: CheckIcon,
},
]
Can you spot what I'm doing wrong? :)
Just add a / in front of products in the href:
<Link href={`/products/${item.href}`}>
You are linking to relative paths, which, when you are on /products, will be /products/products:
I have an array of objects as boxData in my initial data. How would I go about making the word "here" a hyperlink that I can use whenever referencing boxData?
data() {
return {
boxData: [
{
body: "This is the link here."
},
{
body: "Normal text."
}
]
}
}
Child component
<div v-for="(box, index) in boxData" class="box">
<div>
{{ box.body }}
</div>
</div>
Ideally, the objects with a link would have a property like url. Then, assuming all of the links should say "This is the link here", you could do:
<div v-for="(box, index) in boxData" class="box">
<div>
<template v-if="box.url">
This is the link <a :href="box.url">here</a>.
</template>
<template v-else>
{{ box.body }}
</template>
</div>
</div>
Then you don't need "This is the link here" in any of the objects.
You just have to put the data into the hyperlink like so:
<a :href="boxData.body">Here</a>
Much better
<router-link :to="boxData.body">Here</router-link>
I've created a component, and in that component is an audio tag. I've been trying to pass the file path of the mp3 to the component from its parent, but the audio element doesn't seem to be able to load the file successfully for some reason. The element just ends up greyed out, and I don't get any kind of error. I know the properties are being passed successfully because I'm also passing in the title of the track, and that loads just fine in the component. However, if I hardcode the same path in for the source, then it works fine. Which isn't a big deal, but I have 11 tracks to do and it would be much easier with a v-for statement.
Here's my parent component:
<template>
<div container>
<div class=banner>
<img src="../assets/CryptoLogo2.svg"/>
</div>
<div class="albumcontainer">
<div class="covercontainer"><img src="../assets/TIADCover(Final).png"/></div>
<div class="arrow"></div>
<div class="tracklistcontainer">
<table class="tracklist">
<tr class="track" v-for="track in tracks" :key="track.file" style="padding: 20px;">
<td>
<player :name="track.name" :file="track.file" />
</td>
</tr>
</table>
</div>
</div>
<div class="bio">
<p>
</p>
</div>
<div class="footer">
<div class="footericons">
<img src="../assets/icons/Facebook.svg" />
<img src="../assets/icons/Instagram.svg" />
<img src="../assets/icons/Twitter.svg" />
</div>
</div>
</div>
</template>
<script>
import player from './player'
export default {
name: "Album1",
data() {
return {
tracks: [
{
name: '5G',
file: '../assets/tracks/5G.mp3'
}
]
}
},
components:{
player
}
};
</script>
And then the component with the audio tag:
<template>
<div>
<h3>{{ name }}</h3>
<audio controls controlsList="nodownload">
<source ref="player" v-bind:src="file" type="audio/mpeg">
</audio>
</div>
</template>
<script>
export default{
name: "player",
props: {
name: {
type: String,
default: null
},
file:{
type: String,
default: null
}
}
}
</script>
Here you can see that my data is being passed successfully.
And you see that the source attribute is being loaded correctly as well.
This is what I get, and you can see the h3 loads fine, so I know the data is being passed. But the element is greyed out.
To test it out, I tried just hard coding the file path:
<source src="../assets/tracks/5G.mp3">
And that works just fine:
But I don't want to do it like that because I have about 11 tracks to do, so I would like for it to load from the data being passed so that I can reuse the component. Any ideas?
try using something like this in your Vue v-for I use this when src is not loading on the img tag.
:src="getSrc(x.src)"
methods: {
getSrc(src) {
return require("../assets/" + src);
}
}
Your watch function on file prop is never triggered because your file name is static, it never triggers a change on the watcher, before mounting the component, at least in the code you provided it is that way.
From Vue.js API vm.$watch
Watch an expression or a computed function on the Vue instance for changes. The callback gets called with the new value and the old value.