iT邦幫忙

0

vuex 三個 input 的關聯?

假設有三個input

A
B
C

  1. 當輸入 A 與 B 時
    C = A 乘以 B
    這沒問題
  2. 當輸入 A 與 C 時
    B = C 除以 A
    這三個的 v-model 要怎麼互通?
    我目前做到的是第一點
優悠 iT邦新手 4 級 ‧ 2020-05-18 08:44:54 檢舉
當A輸入時,檢查B更新C
當B輸入時,檢查A更新C
當C輸入時,檢查A更新B

1 個回答

3
listennn08
iT邦研究生 2 級 ‧ 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邦研究生 2 級 ‧ 2020-05-19 15:33:47 檢舉

了解

listennn08 iT邦研究生 2 級 ‧ 2020-05-19 15:39:47 檢舉

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

松松 iT邦研究生 2 級 ‧ 2020-05-21 14:38:33 檢舉

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

listennn08 iT邦研究生 2 級 ‧ 2020-05-21 14:44:33 檢舉

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

松松 iT邦研究生 2 級 ‧ 2020-05-21 14:53:00 檢舉


以及輸入 C 時,C 會除以 A,return B
VUEX

listennn08 iT邦研究生 2 級 ‧ 2020-05-21 15:59:57 檢舉

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

我要發表回答

立即登入回答