nuxt-linkとaタグがごっちゃの配列をv-forで回せるか

nuxtでコードを書いているのですが、
リンクを何度も書くのが冗長に思えたので配列にしてv-forで表示させようとしました。
しかし、aタグとnuxt-linkが一緒になってしまっているのでうまくv-forでの記述の方法が分かりません。
v-forを使わずにテンプレートで地道に書いていくべきですか？

現状以下のようになってます

// テンプレート内
<li v-for="sample in samples" :key="sample.id">
  <nuxt-link :to="sample.url">{{ sample.text }}</nuxt-link>
</li>

// scriptでの記述
  data () {
    return {
      samples: [
        {
          id: 1,
          text: 'サンプル1',
          url: '/sample/hoge1'
        },
        {
          id: 2,
          text: 'サンプル2',
          url: '/sample/hoge1'
        },
        {
          id: 3,
          text: 'サンプル3',
// ここがaタグになる
          url: 'https://twitter.com'
        }
      ]
    };

行動規範の内容に同意します

回答1件

ベストアンサー

urlが絶対パスかどうかで分岐をかけてみてはどうでしょうか。
略述ですが以下のような制御です。

vue
1<li v-for="sample in samples" :key="sample.id">
2  <a v-if="sample.url.match(/^https?/)" :href="sample.url">
3    {{ sample.text }}
4  </a>
5  <nuxt-link v-else :to="sample.url">
6    {{ sample.text }}
7  </nuxt-link>
8</li>