Vue : Accessing Nested Object Component's Values

Question

I have problems accessing this "name" property on the component. I can only access it statically.

<template>
    <div class="col-md-12">
        <p
        v-for="channel in channels"
        :key="channel.id"
        class="channel"
        :class="{ 'active': channel.id == activeChannel }"
        @click="setChannel(channel.id)">
        {{ channel.users[0].name }}
        </p>
    </div>
</template>

Here is an Image of my Vue Devtools

So I have an v-for loop over channels, and I want to: Access the Usernames for each channel (if it is not my own preferably as "username" is set on my own i think its easy to exclude it right?) So that in the end In Channel 1 when there are 2 Users , I want to show the corresponding username, so the "other username", the one i am chatting with, and he should see my name that is the initial goal.

I thought of doing something like this:

<template>
<div class="col-md-12">
    <p
    v-for="channel in channels"
    :key="channel.id"
    class="channel"
    :class="{ 'active': channel.id == activeChannel }"
    @click="setChannel(channel.id)">
    <!-- {{ channel.users[0].name }} -->
    <span v-for="user,key in channel">{{key}}</span>
    </p>
</div>

it at least displays the content of the channels object for each channel, but something like this isnt gonna work: key.user.name , unfortunately im stuck here. please help :)

edit: here is a dd() of the view

click EDIT 2: Parent Data Provided:

//chat-app.blade.php
<div id="app">

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Chats</div>

                    <vue-chat :channels="{{ $channels }}" ></vue-chat>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


//<vue-chat> component
<template>
  <div class="chat">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <vue-chat-channels
            :channels="channels"
            :active-channel="activeChannel"
            @channelChanged="onChannelChanged"
            :username="sername"
          ></vue-chat-channels>
        </div>

        <div class="col-md-3">
          <vue-chat-messages :messages="messages"></vue-chat-messages>
        </div>

        <div class="col-md-3">participants</div>
      </div>

      <div class="message-input-wrapper col-md-12"><vue-chat-new-message :active-channel="activeChannel"
    :username="username"></vue-chat-new-message></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["channels"],


  data() {
    return {
      activeChannel: this.channels[0].id,
      messages: [],
      username: ''
    };
  },
  methods: {
    fetchMessages() {
      let endpoint = `/channels/${this.activeChannel}/messages`;
      axios.get(endpoint).then(({ data }) => {
        this.messages = data;
      });
    },
    onChannelChanged(id) {
      this.activeChannel = id;

      this.fetchMessages();
    }
  },

  created() {

    this.fetchMessages();
    axios.get('/userfetch').then( ({data}) => {
            console.log("Current User: "+data.name);
            this.username = data.name;
    });
    console.log(this.channels[0].name);
        // for (let channel of this.channels) {
            this.channels.forEach(channel => {
            // Channelname
            window.Echo.channel('presence-'+channel.name)
            .listen('MessageSent', (channel) => {
                console.log(channel.data.message);
                this.messages.push({ message: channel.data.message, author_username: channel.data.author_username});

            if (this.activeChannel == channel.id) {
            console.log("received message");

            }
        });
            });
        }
};
</script>

<style>
</style>


//ChatController.php
public function index()
{

    $channels = Channel::with('users')->whereHas('users', function($q) {
        $q->where('user_id',Auth::id());
    })->get();

    $user = Auth::user()->name;



    return view('chat-app' , compact('channels','user'));
}

Short Explanation: ChatController returns the blade view, which has the data channels and user (my username) , and then vue comes into play which should pass down the prop of my username but i couldnt get it to work just yet

I can try but i dont really know how to do that when im pulling lots of stuff from database and handling backend stuff (where the channel object comes from) — Coderz9
– Coderz9, Commented Aug 16, 2019 at 8:25
Cant get it working sorry :/ but basically youve seen the object and i want to access the users names for the specific channel, ill update my post to add a dd(); — Coderz9
– Coderz9, Commented Aug 16, 2019 at 8:31

mare96 · Accepted Answer · 2019-08-16 09:10:13Z

1

So you need to access users in every channel.

You can try like this:

<div class="col-md-12">
    <p
    v-for="channel in channels"
    :key="channel.id"
    class="channel"
    :class="{ 'active': channel.id == activeChannel }"
    @click="setChannel(channel.id)">
    <span v-for="user in channel.users">
       {{ user.name }}
    </span>
    </p>
</div>

This should work. If you have errors provide it here.

If you need to compare every user you can do it simply with v-if:

<span v-for="user in channel.users">
    <span v-if="user.name === parentdata">
       {{ user.name }}
    </span>
</span>

edited Aug 16, 2019 at 9:10

answered Aug 16, 2019 at 8:32

mare96

3,8541 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Coderz9 Over a year ago

Well, this is a good answer , especially because it confirms that my trial and error that just got me to the same point is correct^^ thanks for that, can you explain how i can exclude the current user from the list (now multiple people get listed) , the property "username" in the parent component refers to my current username and i pass it down to the child component but kinda missing the logic. As the initial question was answered though ill mark it as checked :) thanks for that btw

mare96 Over a year ago

Hmm... In image which you provided I don't see username for users. Also can you provide your parent data. I updated my answer. I hope it was helpful.

Coderz9 Over a year ago

So i have got it working now, i duplicated the axios get request in the parent to fetch the username and executed it in my child component (vue chat channels) to fetch the names there (because in the parent when props were passed down, the username hasnt been declared yet) and then ill check against my own username so it doesnt display both, if skips mine. I dont know if that solution is beautiful but it works for now. Thanks thanks many thanks!

Collectives™ on Stack Overflow

Vue : Accessing Nested Object Component's Values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related