如何將道具ID傳遞給vue js中的方法

Question

我的項目使用 laravel 作為后端，使用 vue 作為前端。 我想將道具 id 傳遞給方法。 然后，當我單擊按鈕時，它將獲取用戶 ID 並運行繼續進程。

在我看來，我使用它來將 id 傳遞給 vue 組件。

<conversation_send_message_form user_id="{{ $user->id }}"></conversation_send_message_form>

之后這是我的vue代碼

export default {
    data() {
        return {
            body: null,
            recipients: [],
        }
    },
    props: ['id'],
    methods: {
        ...mapActions([
            'sendMessage'
        ]),
        send(){
            this.sendMessage({
                recipientIds: this.id,
                body: this.body
            }).then(() =>{
                this.recipients= []
                this.body = null
            })
        }
    }
}

這里將接收數據並處理它

sendMessage ({dispatch, commit}, {body, recipientIds}) {
    return api.storeMessage({
        body: body,
        recipientIds: recipientIds
    }).then((response) => {
        console.log(response)
    })
},

我的 API

storeMessage({body, recipientIds}){
    return new Promise((resolve, reject) => {
        axios.post('/webapi/conversations', {
            body: body,
            recipients: recipientIds
        }).then((response) =>{
            resolve(response)
        })
    })
},

在我的場景中，我需要一個新方法來獲取道具 id 並將其傳遞給新方法“Send”，在其中將 id 傳遞給接收者Ids，然后 api 將處理它。 但我不知道如何獲得道具 ID。 任何人都可以幫助我嗎？

Answer 1

您有兩種方法可以將數據傳遞給您的 vue 組件，一種是使用靜態道具

<conversation_send_message_form user_id="15"></conversation_send_message_form>

另一種是使用動態屬性

<conversation_send_message_form v-bind:user_id="user.id"></conversation_send_message_form>

注意 laravel Blade 與類似 mustache 的語法

這些屬性是在帶有“props”的組件中接收的，並且可以在 js 中使用 this.PROPNAME 訪問（並且可以在模板中直接使用 PROPNAME 訪問）所以你唯一的問題是名稱不匹配，只需更改

export default {
    props: ['userId'],
    send() {
            this.sendMessage({
                recipientIds: this.userId,
                body: this.body
            }).then(() =>{
                this.recipients= []
                this.body = null
            })
     },
}

還要注意用 camelCase 與 kebab-case 命名： https ://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case