前端，純屬紀錄。順便督促

2020年2月11日星期二

[Vue] vue-router 進入頁面若無帶 query 參數帶入指定 query

情境：在任意網頁甚至主頁點選進入 /products
會沒有指定 query ( 如 /products?type=food ) 只進入 /products
使其固定帶上 query 方式如下

      {

        name: 'products',

        path: `${rootPath}/products`,

        component: () => import(/* webpackChunkName: "courses" */ '../pages/products/').then(m => m.default || m),

        beforeEnter: (to, from, next) => {

          if (!to.query.type) {

            next({

              path: to.path,

              query: { type: 'food' }

            })

          }

          next()

        }

      },

2020年1月9日星期四

[Vue] 關於 v-for 產表單 v-model bind 自定義 dataName

參考自
https://forum.vuejs.org/t/v-model-with-dynamically-created-inputs-with-v-for/9556

這邊遇到問題：想利用 v-for 產表單，同時綁不同「已預設好名稱」的 key 。
原先讓 v-model 指向在 data 設好的 name = '', account = '' ... ， (v-model = 'this.dataName')
但這只會指向記憶體位置的空字串

最後解決方案： data 建立一個物件，內含符合自己命名的 key ， value 為空，
並在 v-for items 的 items 塞對應的 key (String) 給 v-model 讀取
描述得不好，直接上範

      <div

        v-for="(item, index) in fromApiData"

        :key="index"

      >

        <label for="" class="label form__label w-4/5">{{ item.title }}</label>

        <input

          class="input form__input w-4/5"

          type="text"

          :placeholder="item.detail || '未設定'"

          v-model="inputCatcher[item.model]"

        />

      </div>

      // 其他省略

  data () {

    return {

      inputCatcher: {

        name: '',

        account: '',

      },

    }

  },

  computed: {

    fromApiData () {

      return [

        {

          title: '名稱',

          detail: this.user.name,  // user 為從 api 抓到的資料
          // model: this.name 原本錯誤的ㄒ

          model: 'name'

        },

        {

          title: '帳號',

          detail: this.user.account,

          model: 'account'

        },

      ]

    }

  },