时间戳

首页 > 解决方案 > Vue：访问嵌套对象组件的值

javascript - Vue：访问嵌套对象组件的值

问题描述

我在访问组件上的这个“名称”属性时遇到问题。我只能静态访问它。

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

这是我的 Vue Devtools 的图片

所以我在频道上有一个 v-for 循环，我想： 访问每个频道的用户名（如果它不是我自己最好的，因为“用户名”是我自己设置的，我认为很容易排除它吗？）所以最后在 Channel 1 有 2 个用户时，我想显示相应的用户名，所以“其他用户名”，我正在与之聊天的那个，他应该看到我的名字，这是最初的目标。

我想过做这样的事情：

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

它至少显示了每个频道的频道对象的内容，但是这样的东西是行不通的：key.user.name，不幸的是我卡在这里。请帮忙 ：）

编辑：这是视图的 dd()

单击 编辑 2：提供的父数据：

//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'));
}

简短说明：ChatController 返回具有数据通道和用户（我的用户名）的刀片视图，然后 vue 开始发挥作用，它应该传递我的用户名的道具，但我还不能让它工作

标签： javascriptlaravelvue.jsvuejs2

解决方案

因此，您需要访问每个渠道中的用户。

你可以这样尝试：

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

这应该有效。如果您有错误，请在此处提供。

如果您需要比较每一个user，您可以简单地使用v-if：

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

推荐阅读