Opening url in json file with vue.js

August 29, 2022

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.

>Solution :

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