v-if 指令在提供/注入逻辑 vue 中不起作用

Question

v-if 指令似乎在提供/注入逻辑中不起作用。我试图保留此项目结构，但机器人组件会同时显示，即使我使用 v-if 显示单个组件也是如此。我想组件没有正确地从 App.vue 读取我提供的数据，或者我做错了什么？

https://codesandbox.io/s/boring-einstein-bhyfeu?file=/src/components/Step1.vue

<template v-if="activePhase == 1">  //this line is not working for each component
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <button type="button" @click="nextStep" class="btn">Next step</button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  inject: ["activePhase", "firstName", "lastName"],
  data() {
    return {
      activePhase: this.activePhase,
      firstName: this.firstName,
      lastName: this.lastName,
    };
  },
  methods: {
    nextStep() {
      this.$emit("next");
      console.log(this.activePhase);
    },
  },
};
</script>

<style scoped>
.form-group {
  display: block;
}
</style>

Answer 1

是的，您不能在 SFC 的外部 template 标记上使用 v-if，因为它是 SFC 结构的一部分，而不是实际模板。

尝试

<template>
  <div class="container" v-if="activePhase == 1">
     ...
  </div>
</template>