Question

我在刀片模板中使用了PHP var，并希望将其传递给vue的方法。

如果看起来很明显，我仍然在学习，但是我读了文档，但发现它很有用。

所以我在 HTML

中有这段代码

<chat-messages :messages="messages" :surgery_id="{{ $surgery->id }}"></chat-messages>

在我的 JS

中

Vue.component('chat-messages', require('./components/ChatMessages.vue'));

const app = new Vue({
    el: '#chat',

    methods: {
        fetchMessages() {
            axios.get('/messages/').then(response => {
                this.messages = response.data;
            });
        },
    }
});

我想使用像axios.get('/messages/' + surgery_id).then(...)

这样的东西

但我无法弄清楚如何检索此surgery_id变量

在我的 ChatMessages.vue 中，我创建了属性

<template>
    //Stuff to loop & display
</template>

<script>
  export default {
    props: ['messages' , 'surgery_id']
  };
</script>

Answer 1

正常使用this数据：

axios.get('/messages/' + this.surgery_id).then(...)

您可以使用this作为上下文访问数据选项，道具和方法的所有属性。

此外，如果你想使用ES6，那么在不连接它们的情况下更容易:(使用代字键`）

axios.get(`/messages/${this.surgery_id}`).then(...)

根据您的查询，您还需要在您的实例中传递道具：

const app = new Vue({
  // ...
  propsData:{
    surgery_id: 'your id value'
  }

有关更多帮助，请参阅my another post。

如何访问道具数据？

1 个答案: