router-linkのparamsを動的に変化させる方法

Question

router-linkを利用し、2つのタグをGET送信しようと考えております。
下記のコードの「tag.tag_id」に２つまでタグを許可する予定です。

しかし、これは最初のレンダリングの際にtag.tag_idがないため、エラーとなります。
そこれtag.tag_id1、tag.tag_id2の初期値をnullとして、v-modelのようなものを利用して動的にセットできればと考えているのですが、これは可能なのでしょうか。

どなたかご教示ください。よろしくお願い致します。

<router-link 
    tag="button"
    class="btn__tag_search" 
    :to="{ name: 'searchData', params: { tag.tag_id1: tag.tag_id1, tag.tag_id2: tag.tag_id2 } }">
    <i class="fa fa-search fa-fw"></i>        
</router-link>

    data: function() {
        return {
            tag: null,
            error: {},
        }

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/user/search/:tag_id1/:tag_id2', component: List, name: 'searchData', meta: { mode: 'search' }},

Answer 1

data {
  tag: { tag_id1: -1, tag_id2: -1 }
}

tag のキーが決まっているなら null ではなくデフォルト値のオブジェクトにしておき後から変えるか

<router-link v-if="tag" ...>

v-if で値が入るまで展開しないようにするといいです。

Comments

[supermaruetsu]

v-ifでの制御で解決できました。ありがとうございました！！

Answer 2

そこれtag.tag_id1、tag.tag_id2の初期値をnullとして、v-modelのようなものを利用して動的にセットできればと考えているのですが

router-linkでsearchDataに飛ぶときにどうやって/user/search/:tag_id1/:tag_id2のパラメーター:tag_id1と:tag_id2をセットするか、ということでしょうか。

<router-link 
  ...
  :to="{ name: 'searchData', params: { tag.tag_id1: tag.tag_id1, tag.tag_id2: tag.tag_id2 } }>

すでにそれらしきものを書いていらっしゃいますが、これだとjsの文法的にまずいです。オブジェクトリテラルでキーに.は使えません。使うとすればキーをクォーテーションで囲む必要があります。しかし今tag.はいりません。なぜならpath: '/user/search/:tag_id1/:tag_id2'にtag.は含まれて居ないからです。

修正後

<router-link 
  ...
  :to="{ name: 'searchData', params: { tag_id1: tag.tag_id1, tag_id2: tag.tag_id2 } }>

Demo