Question

我是Vue.js的新手，我正在尝试实现类似于代码行为的导航。我这里是服务器的简单列表，我希望“选定的服务器”具有不同的背景色，以便可以看到所选择的内容。我的问题是，编码方式是在选择其他服务器后，active属性仍然存在。我想做的是，一旦我选择了另一台服务器，它将从之前选择的服务器中删除活动的类。

<template>
  <li
    class="list-group-item"
    style="cursor: pointer"
    @click="serverSelected"
    v-bind:style='{"background-color": (isActive? "yellow" : "orange" )}'>
    Server #{{ server.id }} Server status: #{{ server.status }}
  </li>
</template>

<script>
    import { serverBus } from "../../main";

    export default {
        data: function () {
            return{
                isActive: false
            }
        },
        props: ['server'],
        methods: {
            serverSelected() {
                serverBus.$emit('serverSelected', this.server);
                this.isActive = !this.isActive;
            }
        }
    }
</script>

Answer 1

共享状态应存储在父组件中，在这种情况下，只有父组件才能知道选择了哪个服务器。

您可以直接从父级更改样式/类，也可以将诸如isSelected之类的道具传递给每个子级组件，例如父级组件：

<template>
  <div>
    <server
      v-for="(server) in servers"
      :key="server.id"
      :is-selected="server.id == activeServer"
      :server="server"
      @selected="selectServer(server.id)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      servers: [
        {
          id: 1,
          status: 'ok'
        },
        {
          id: 2,
          status: 'ok'
        },
        {
          id: 3,
          status: 'ng'
        },
      ],
      activeServer: null,
    }
  }
  methods: {
    selectServer(serverId) {
      this.activeServer = serverId
    }
  }
}
</script>

和子组件：

<template>
  <li
    class="list-group-item"
    style="cursor: pointer"
    @click="serverSelected"
    v-bind:style='{"background-color": isSelected}'>
    Server #{{ server.id }} Server status: #{{ server.status }}
  </li>
</template>

<script>
export default {
  props: ['server', 'isSelected'],
  methods: {
    serverSelected() {
      this.$emit('selected', this.server.id)
    }
  }
}
</script>

Vue.JS @click活动样式在@click不同组件后被停用

1 个答案: