对 vue.js 组件中的 props 进行操作

Posted 2023-02-23

【中文标题】对 vue.js 组件中的 props 进行操作

【英文标题】：operating on props in vue.js components

【发布时间】：2017-08-14 06:43:21

【问题描述】：

我对 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"  >                                        
            <div class="chat-user-name">
                <a :href="'/user/' + other.id"> other.name</a>
            </div>
        </div>
    </div>
</div>
//this all works, just for reference

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

编辑：父实例代码 哦，我似乎无法访问正在传递的房间数组，因为它始终是空的 IN 代码，但它在 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

在这件事上，我的大部分头发都被撕破了，请大家帮忙

【问题讨论】：

能不能也加上父组件的vue-instance代码？

不是computes，应该是computed

好的 @BelminBedak 我试试谢谢

data 似乎不包含messages、rooms？这是故意的吗？

@carrion 尝试在您的子组件中对rooms 使用watch。我认为它是一个空数组，因为当子组件被创建时，api 调用没有得到解决，导致它在父组件上的默认值是 []

【参考方案1】：

在传递 props 的子组件中。

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);
        );
    
  

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

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

【讨论】：

哇，非常感谢解决了我的问题，正如你所说，当房间第一次登录 created() 时它是空的，但是当他们登录时它包含所有值，再次感谢！！

很高兴它有帮助:)