在 vue.js 个组件中操作道具

Question

我是 vue 的新手，我正在尝试将我的 laravel 项目的前端迁移到 vue，但我遇到了问题，我正在尝试遍历提供的数组对象称为房间并为我的组件中的每个创建 div，并将默认值 room_id 设置为房间的第一个 id。问题是什么时候在 dom (html) 中访问提供的名为 'room' 的 prop 数组它可以完美地工作，但是在我的组件文件的 vue 代码中它似乎总是未定义或空的这是我的组件 vue 代码：

export default {
    created() {
        //this.loadMessages(this.room_id)
        console.log(this.first_room)  //undefined;
        console.log(this.rooms) //empty array;
    },
    props: ['rooms','first_room'],
    computes:{
        myrooms: function(){
            return this.first_room;
        }
    },
    data()
    {
        return{
            messages: [],
            newMessage: '',
            room_id: 1 //for test purposes, this works,
        }
    },
    methods: {
        loadMessages(id)
        {
            axios.get('/messages/'+id).then(response => {
                this.messages = response.data;
                console.log(response.data);
            });

        }
    }
}

组件的重要部分html

<div v-for="room in rooms">
    <div class="chat-user room">
        <div v-for="other in room.others">
            <img class="chat-avatar img-circle" :src="other.image" alt="image" >                                        
            <div class="chat-user-name">
                <a :href="'/user/' + other.id">{{ other.name}}</a>
            </div>
        </div>
    </div>
</div>
//this all works, just for reference

我在主 vue 实例中设置传递给道具的值的方法

编辑：父实例代码 哦，我似乎无法访问正在传递的房间数组，因为它在代码中始终为空，但它在 html

中循环

window.App.app= new Vue({
el: '#wrapper',
data: {
    messages: [],
    rooms: [],
    test: 'yes',
    first: ''
},
created() {
    this.fetchRooms();
    this.first = 1;
},
methods: {
    fetchMessages(id) {
        console.log(id);
    },
    fetchRooms()
    {
        axios.get('/rooms').then(response => {
            this.rooms = response.data;
        });
    }
}
});

终于在我调用我的组件的地方

<chat-messages :rooms="rooms" :first_room="1"></chat-messages>
//variables referenced from main vue instance

我的大部分头发都被撕破了，请提供任何帮助，我们将不胜感激

Answer 1

在传递道具的子组件中。

export default {
  created() {
    console.log(this.first_room)  //undefined;
  },
  props: ['rooms','first_room'],
  computed :{
    myrooms: function(){
        return this.first_room;
    }
  },
  data () {
    return {
        messages: [],
        newMessage: '',
        room_id: 1 //for test purposes, this works,
    }
  },
  watch: {
    rooms (n, o) {
      console.log(n, o) // n is the new value, o is the old value.
    }
  },
  methods: {
    loadMessages (id) {
        axios.get('/messages/'+id).then(response => {
            this.messages = response.data;
            console.log(response.data);
        });
    }
  }
}

您可以添加对数据属性或计算的监视以查看其值的变化。

在问题中，（看起来是这样），您在 created 生命周期中 consoled 道具的价值，道具的价值被改变API 在创建子组件后调用父组件。这解释了为什么您的模板显示数据但不显示在创建的生命周期挂钩中的 console 中。

在 vue.js 个组件中操作道具

operating on props in vue.js components

html

javascript

vue.js

vue-component