iT邦幫忙

0

Vue.js 元件包裝方式

我想要代user.account跟user.password到父元件上,
用途是在ajax送出時可以直接用user送資料
但一直出錯試了很久解決不了,想請教解決方法。

子元件
LoginComponent.vue:

<template>
    <form>
        <div class="form-group">
            <div class="row">
                <label for="account" class="col-4 col-form-label">帳號</label>
                <div class="col-8">
                    <input type="text" class="form-control" :value="user.account" required autofocus>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label for="password" class="col-4 col-form-label">密碼</label>
                <div class="col-8">
                    <input type="password" class="form-control" :value="user.password" required>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-8 ml-auto">
                    <button @click.prevent="login()" class="btn btn-primary">登入</button>
                </div>
            </div>
        </div>
    </form>
</template>

<script>
    export default {
        props:{
            user:{
                account:{
                    type:String,
                },
                password:{
                    type:String,
                },
            },
        },
        methods:{
            login(){
                axios.post("/api/login",this.user)
                .then((res)=>{
                    if(res.data.success){
                        this.$router.push("index");
                    }else{
                        console.log("login error");
                    }
                });
            }
        }
    }
</script>

父元件
Login.vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-8 mt-5">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-center">登入</h5>
                        <login-component user.account="123" user.password="456"></login-component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LoginComponent from "../../js/components/LoginComponent";
    
    export default {
        components: {
            LoginComponent,
        }
    }
</script>

錯誤訊息:
https://ithelp.ithome.com.tw/upload/images/20200406/20122444F7XROG7q3k.png

https://ithelp.ithome.com.tw/upload/images/20200406/201224443fSNGHPvcl.png

listennn08 iT邦研究生 4 級 ‧ 2020-04-06 08:50:19 檢舉
prop 是外層傳內層
你是要外層傳內層還是內層傳外層

2 個回答

2
marlin12
iT邦新手 1 級 ‧ 2020-04-06 20:26:00
最佳解答

codesandbox.io - vue

傳入一個對象的所有屬性

LoginComponent.vue

<template>
  ...  ...  ...
  <input type="text" :value="user.account" class="form-control" required>
  ...  ...  ... 
  <input type="password" :value="user.password" class="form-control" required>
  ...  ...  ...
</template>

<script>
export default {
  props: {
    user: Object
  },
  ...  ...  ...
};
</script>

Login.vue

<template>
  ...  ...  ...
  <login-component :user="users[1]"/>
  ...  ...  ...
</template>

<script>
export default {
  data: function() {
    return {
      users: [
        { account: "John", password: "123456" },
        { account: "Mary", password: "456790" }
      ]
    };
  }
  ...  ...  ...
};
</script>
adha9990 iT邦新手 5 級 ‧ 2020-04-07 01:37:23 檢舉

好的感謝
可以用attr做多層,prop類型沒辦法

2
froce
iT邦大師 2 級 ‧ 2020-04-06 10:16:35

子傳父:
子元件emit事件
然後在父元件裡用到子元件的地方加上@事件

子組件

        methods:{
            login(){
                ...
                this.$emit("logined", this.user)
            }
        }

父組件:

...

<login-component user.account="123" user.password="456" @logined="logined"></login-component>

...
...
...

methods:{
    logined(){
        ...
    }
}

無關緊要的code我就略過了。

adha9990 iT邦新手 5 級 ‧ 2020-04-06 15:11:23 檢舉

emit事件目前還沒測到。
我想要父元件輸入value,子元件能接到,並在畫面上顯示,
但子元件接不到父元件傳回來的資料,只抓得到user而不是user.account
https://ithelp.ithome.com.tw/upload/images/20200406/20122444fXZ1kXjtFt.png

如果不用user去包資料是可以顯示的
https://ithelp.ithome.com.tw/upload/images/20200406/20122444CD921xF3ab.png

froce iT邦大師 2 級 ‧ 2020-04-06 17:24:51 檢舉
props:{user:object}

我記得不能檢查多層,要檢查多層得自己寫驗證器
https://neemzy.org/articles/in-depth-object-prop-validation-in-vue-js

我要發表回答

立即登入回答