Opening url in json file with vue.js

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:

   <div class="q-pa-md q-gutter-sm">
    <q-btn @click="gotoUrl" color="white" text-color="black" label="Standard" />

import json from './assets/test.json'

export default defJson({
  setup: () => ({jsonData}),
  methods: {

Json file:

  "id": "1",
  "name": "stackoverflow",
  "url": ""

When I click this button, the link needs to be read and opened in the json file.

>Solution :

First you wan to loop over the objects in your JSON array like this:

  <div v-for="site in jsonData" :key="" class="q-pa-md q-gutter-sm">

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="" class="q-pa-md q-gutter-sm">
    <a :href="site.url" target="_blank">
      <q-btn color="white" text-color="black" :label="" />

Its pretty basic vue stuff.. They have great documentation, check it out:

Leave a Reply