尝试填充下拉列表时出现问题

Question

错误详情

Property or method "chatusers" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

分量 - 1

<template lang="html">
    <div>
        <select name="User_ID" class = "form-control">
            <option value="-1">Please select User</option>
            <option v-for="chatuser in chatusers" v-bind:value="chatuser.User_ID">
               {{ chatuser.UserName }}
            </option>
        </select>
    </div>
</template>

<script>
</script>

<style lang="css">
</style>

代码在Blade

<chat-composer :chatusers="chatusers"></chat-composer>

app.js

const app = new Vue({
    el: '#app',
    data: {
        chatusers: []
    },
    created() {
        axios.post("some url").then(response => {
            if(response.Status) {
                this.chatusers= response.data.Data;
            }
            else {
                this.chatusers= [];
            }
        });
    }
});

Answer 1

您忘记将道具添加到您的 Component 1

在 <script>

中执行此操作

export default {
  props: ['chatUsers']
}

当然，也可以在 <script> 标签内添加与您的上下文相关的其他内容。

尝试填充下拉列表时出现问题

Issue while trying to populate the dropdown

vue.js

laravel-5.5