Блог

Я новичок в Vue, и я хочу отобразить компонент после того, как пользователь нажмет на кнопку. Может быть, я делаю это неправильно?

Это <sample-component> просто баннер, который должен отображаться в верхней части страницы

Пример кода

 <template>
    <div class="page">
        <div class="content">
            <sample-button @click="showBanner">
                Show banner
            </simplex-button>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    methods: {
        showBanner() {
            return `
            <template id="banner">
                <div class="banner-page">
                    <sample-component>
                        <p> hello </p>
                    </sample-component>
                </div>
            </template>`;          
        },
    },
});
</script>
  

 <template>
    <div class="page">
        <div class="content">
            <sample-button @click="showBanner()">
                Show banner
            </sample-button>
            <div id="banner" v-if="visible">
                <div class="banner-page">
                    <sample-component>
                        <p> hello </p>
                    </sample-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    data() {
        return {
            visible: false
        }
    },
    methods: {
        showBanner() {
            this.visible = true        
        },
    },
});
</script>
  

Вы просто можете отобразить его, изменив data свойство, переданное в v-if директиву

Пожалуйста, обратите внимание, что вы не должны возвращать шаблон из метода, а также вы не можете назначить id <template> тегу, поскольку они фактически не отображаются. Поэтому вам в основном нужно изменить свой шаблон на следующий:

 <template>
  <div class="page">
    <div class="content">
      <!-- note that your banner component has shifted here -->
      <div v-if="isBannerVisible" id="banner">
        <div class="banner-page">
          <sample-component>
            <p>hello</p>
          </sample-component>
        </div>
      </div>

      <sample-button @click="isBannerVisible = true">
        Show banner
      </sample-button>
    </div>
  </div>
</template>
  

и ваш скрипт также для:

 <script lang="ts">
import Vue from "vue";

// since your using Typescript it is better to use the class syntax
export default class MyComponent extends Vue {
  private isBannerVisible: boolean = false
};
</script>