iT邦幫忙

0

vuex 三個 input 的關聯？

vue vuex js vue.js
火爆浪子 2020-05-18 06:11:30 ‧ 1572 瀏覽

  • 分享至 

  • xImage

假設有三個input

A
B
C

  1. 當輸入 A 與 B 時
    C = A 乘以 B
    這沒問題
  2. 當輸入 A 與 C 時
    B = C 除以 A
    這三個的 v-model 要怎麼互通？
    我目前做到的是第一點
優悠 iT邦新手 3 級 ‧ 2020-05-18 08:44:54 檢舉
當A輸入時，檢查B更新C
當B輸入時，檢查A更新C
當C輸入時，檢查A更新B
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
listennn08
iT邦高手 5 級 ‧ 2020-05-18 10:49:32
最佳解答

watch 是你的好夥伴

new Vue({
    data () {
        return {
            A: null,
            B: null,
            C: null,
        }
    },
    watch () {
        B () {
            if (this.A) {
                this.C = this.A * this.B;
            }
        },
        C () {
            if (this.A) {
                this.B = this.C / this.A;
            }
        }
    }
}).$mount('#app')

codepen

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2020-05-19 15:33:47 檢舉

了解

listennn08 iT邦高手 5 級 ‧ 2020-05-19 15:39:47 檢舉

松松
watch 跟 computed 間還是有一些差異
這種時候 用 watch 我認為比較妥當

火爆浪子 iT邦研究生 1 級 ‧ 2020-05-21 14:38:33 檢舉

假設三個的資料都是從 vuex 回來呢？

listennn08 iT邦高手 5 級 ‧ 2020-05-21 14:44:33 檢舉

你的意思是用 A, B 送去 state 去計算 然後 return 計算完的 C ?

火爆浪子 iT邦研究生 1 級 ‧ 2020-05-21 14:53:00 檢舉

嗯
以及輸入 C 時，C 會除以 A，return B
ＶＵＥＸ

listennn08 iT邦高手 5 級 ‧ 2020-05-21 15:59:57 檢舉

松松
codepen
我更新了 應該是這樣
因為我懶
所以寫在同一個 function
用不同 function 寫法就跟用 watch 一樣

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙