Vue.js: загружать компонент только если пользователь нажимает кнопку

Question

У меня есть код, который выглядит как код ниже.как настроить это так, чтобы компоненты «dataPart1» и «dataPart2» не загружались, пока пользователь не нажмет кнопку для просмотра данных? Другими словами, я не хочу, чтобы данные просто автоматически отображались, но только еслипользователь выбирает, чтобы увидеть его с помощью нажатия кнопки.

var app = new Vue({
  el: '#data',
  data: {
    show: true,
    something: true,
  },
  components: {
    dataPart1,
    dataPart2
  },
  ...other stuff...
  }
});

Answer 1

Для условного отображения содержимого в шаблонах (текст, HTML, компоненты и т. Д.) Мы можем использовать условный рендеринг Vue.js и, в частности, директиву v-if.

Краткое объяснение: мы можем отображать контент в зависимости от определенных переменных, определенных в нашем компоненте.И измените значение этой переменной при определенных событиях, например, при нажатии кнопки.

Пожалуйста, посмотрите на пример загрузки CodeSandbox двух компонентов при условии нажатия кнопок.

В App.vue файле,у нас есть 2 кнопки, которые запускают обработчик при нажатии и отображают компоненты, если соответствующее значение true.