使用 vue.js 在 json 文件中打開 url

Question

我的 json 文件中有一個url key ，並且有針對它的values 。 當我使用vue.js創建一個button並click此按鈕時，我希望打開 url。 我該怎么做？

我的代碼：

<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 文件：

[
  {
  "id": "1",
  "name": "stackoverflow",
  "url": "https://stackoverflow.com/"
  }
]

單擊此按鈕時，需要在 json 文件中讀取並打開該鏈接。

Answer 1

首先，您要遍歷 JSON 數組中的對象，如下所示：

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

然后，您可以使用 href 中的站點中的 url 簡單地在按鈕周圍創建元素：

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

它非常基本的 vue 東西.. 他們有很好的文檔，請查看： https://vuejs.org/guide/introduction.html