Opening url in json file with vue.js-CodePudding

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 >
    <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.

CodePudding user response：

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

  <div v-for="site in jsonData" :key="site.id" >
    ...
  </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" >
    <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