Question

我的项目使用laravel作为后端，vue作为前端。我想将props 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并传入新方法“发送”，在其中将id传递给recipientIds，然后api将处理它。但我不知道如何获得道具ID。有人可以帮帮我吗？

Answer 1

您有两种方法将数据传递到vue组件，一种是使用静态prop

<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 vs mustache-like语法

使用＆＃34; props＆＃34;在组件中接收这些属性，并且可以使用this.PROPNAME访问js内部（并且可以直接使用PROPNAME访问模板内部）所以你唯一的问题是名称不匹配，只需更改

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

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

如何将props id传递给vue js中的方法

1 个答案: