Question

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

<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

所以我在频道上有一个v-for循环，我想：访问每个频道的用户名（如果不是我自己的，最好是自己设置“用户名”，我认为很容易排除它）？）最后在通道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>

它至少显示每个频道的channel对象的内容，但是这样的事情是行不通的：key.user.name，不幸的是我停留在这里。请帮助：）

编辑：这是视图的dd（）

click 编辑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进入其中，它应该传递我的用户名的属性，但我现在还无法使它起作用。

Answer 1

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

您可以尝试这样：

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

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

1 个答案: