Как при клике на элемент в компоненте, закрыть его и открыть другой?

Question

[sickgang]

Есть компонент App.vue, в нем подключены компонент корзины, и компонент модального окна после оформления заказа:

<basket v-show="showModalBasket" @close="showModalBasket = false"></basket>
  <basketend v-if="showModalBasketEnd"></basketend>

  data() {
    return {
        showModalBasket: false
        showModalBasketEnd: false
    }
  }

Нужно сделать так, чтобы при клике на кнопку оформления заказа в компоненте корзины, он закрывался и открывался компонент модального окна, где написано "спасибо за заказ".

Как это можно сделать?

Comments

[WapSter]

v-if освоить не можешь? События, и методы?
https://ru.vuejs.org/v2/guide/conditional.html - для условия отрисовки
https://ru.vuejs.org/v2/guide/events.html - собыитя, для отслеживания нажатия.
https://ru.vuejs.org/v2/guide/events.html#%D0%9C%D... - методы для действий при срабатывании события. Удачи в изучении и сложить 2+2

Answer 1

[Andrey Vasilev]

corzina(v-if="uslovie")
modal(v-else)

в дате uslovie: true/false
https://ru.vuejs.org/v2/guide/conditional.html#v-if

Comments

[sickgang]

Я сделал через условие, но если корзина скрыта, то модальное окно открыто всегда, а мне нужно только при клике на кнопку оформления заказ, чет я туплю конкретно

[WapSter]

sickgang, по этому сообщению я вижу, что вообще практически не работал с нативным js. Может стоит в нем знания подтянуть, поработать с обычным DOM деревом, а потом уже во vue лезть. Это не стеб я серьезно, это очень облегчает жизнь.

[sickgang]

WapSter, да, согласен, но щас то нужно сделать это)))

[Andrey Vasilev]

sickgang,

[sickgang]

Andrey Vasilev, да это понятно, но элемент по которому нужно тыкать для оформления заказа находится в одном компоненте, а модальное окно это другой компонент

[Andrey Vasilev]

sickgang, и?

[Andrey Vasilev]

sickgang,

читать

https://medium.com/@modex13/vue-js-2-%D0%BF%D0%B5%...

[sickgang]

Andrey Vasilev, понял, спасибо большое, сейчас буду вникать

[Andrey Vasilev]

sickgang, там ничего сложного на самом деле

[sickgang]

Andrey Vasilev, а я могу вызвать событие через $emit на действие одного компонента в другом?

[Andrey Vasilev]

sickgang, если ты в app.js, то тебе надо передать в компонент необходимое значение. После чего в компоненте поймать его через props, потом этот пропс можно юзать.
modal(:modalChecker="modalState")
компонент:
props: { modalChecker }
потом можешь даже вывести где-нибудь в компоненте {{modalChecker}}

[sickgang]

Я вот сейчас прочитал статью, и сделал так как там в точности
Я в компоненте Basket.vue , сделал так на кнопку оформить заказ @click="removeItem", прописал метод, сделал console.log(1), в консоль при клике выводит, потом написал this.$emit('remove', и в компоненте App.vue который родитель компонента Basket.vue, повесил событие v-on:remove="removeFromList", и в методах прописал этот метод removeFromList , написал console.log(1), но единицу не выводит, то есть this.$emit('remove') не срабатывает
Сделал в точности как в статье, может что то не так делаю?

[Andrey Vasilev]

sickgang, я тебе написал как попробуй

[sickgang]

Andrey Vasilev, но у меня вот так app.js выглядит

import Vue from 'vue'
import VueScrollactive from 'vue-scrollactive'
import store from './store.js'

Vue.use(VueScrollactive);

require('./bootstrap');

import App from './App.vue'

const app = new Vue({
    el: '#app',
    components: {App},
    store: new Vuex.Store(store)
});

Я в нем ничего не делаю, делаю в App.vue, так правильно?

[sickgang]

Andrey Vasilev, Вот так App.vue выглядит

<basket v-show="showModalBasket" @close="showModalBasket = false"></basket>
  <backtotop></backtotop>
  <basketend v-on:remove="removeFromList"></basketend>

</div>

</template>

<script>
import hotitems from './components/HotItems.vue'
import diarieshead from './components/DiariesHead.vue'
import giftpenshead from './components/GiftPensHead.vue'
import penshead from './components/PensHead.vue'
import basket from './components/Basket.vue'
import backtotop from './components/BackToTop.vue'
import basketend from './components/BasketEnd.vue'


export default {
  props: ['data'],
  data() {
    return {
        items: [
          'Горячие новинки',
          'Ежедневники',
          'Подарочные ручки',
          'Ручки'
        ],
        showModalBasket: false,
        active: false
    }
  },
  methods: {
    removeFromList() {
      console.log(1)
    },
    showBasket: function () {
      event.preventDefault()
      this.showModalBasket = true
    },
      clickMenu: function() {
      this.active = !this.active
    },
    openBasketEnd: function () {
      console.log(1)
      this.showModalBasketEnd = true
    }
  },
  components: {hotitems, diarieshead, giftpenshead, penshead, basket, backtotop, basketend}
}
</script>

[sickgang]

Andrey Vasilev, Я не понимаю как в компонент получить данные из data родителя, через props: ['data']?
Если да, то у меня почему то не получается

[Andrey Vasilev]

sickgang, да, сорян, app.vue. очепятался
baskState в data у нас boolean (true/false)

<basketend v-bind:bask="baskState"></basketend> //состояние чекера передаем (true/false).

в basketend пишешь

props: {
 bask: {
  type: boolean
 }
}

потом попробуй в любом месте вывести и переключать что нужно. есть значение bask?

[sickgang]

Получилось вот что
baskend.vue:

<template>
  <div class="basket-end_wrapp">
    <div class="basket-end">
      <span>Спасибо за заказ!</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
   bask: {
    type: boolean
   }
 }
}
</script>

App.vue:
<basketend v-on:bask="baskState"></basketend>

Ошибка в консоли:
Uncaught ReferenceError: boolean is not defined
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/BasketEnd.vue?vue&type=script&lang=js& (app.js:2258)

[Andrey Vasilev]

sickgang, v-bind:bask="baskState"
или укороченная
:bask="baskState"

[sickgang]

Andrey Vasilev, та же самая ошибка

[Andrey Vasilev]

sickgang, попробуй тогда не boolean, а Boolean

[sickgang]

Andrey Vasilev, теперь такая ошибка
Property or method "baskState" is not defined on the instance but referenced during render.

[Andrey Vasilev]

sickgang, в app.vue в data запиши baskState: false

[sickgang]

Andrey Vasilev, да, выводится на страницу, как теперь этим всем управлять что бы при оформлении заказа работало, мозги кипят уже...

[Andrey Vasilev]

sickgang, ну уж полностью я тебе не буду обьяснять.
меняешь переменную вот эту baskState в app.vue по клику.
то есть на элемент который ты хочешь повесить событие ставишь обработчик
@click="showElement",
потом пишешь метод для него в methods.
showElement() { this.baskState = !this.baskState }
теперь при клике будет изменятся значение в app.vue, потом лететь в компонент и там обновляться
соответсвенно теперь тебе надо в компоненте сделать условие
то что нужно скрыть/отобразить

v-if(bask) // bask потому что в компоненте мы его записали по-другому

[sickgang]

Andrey Vasilev, это понятно да, но клик у меня происходит в самом компоненте basket, и там выходит ошибка "ReferenceError: baskState is not defined"

[Andrey Vasilev]

sickgang, showElement() { bask = !bask } значит просто

[sickgang]

Andrey Vasilev, не получается))))))))))))))))))))

[sickgang]

Andrey Vasilev, app.js:40693 [Vue warn]: Error in v-on handler: "ReferenceError: bask is not defined"

found in

---> at resources/js/components/Basket.vue
at resources/js/App.vue

[Andrey Vasilev]

sickgang, this.bask = !this.bask

[sickgang]

Andrey Vasilev, Вроде меняется с true на false, но везде перепробовал v-if(bask) не работает все равно

[Andrey Vasilev]

sickgang, v-if="bask"

[sickgang]

Andrey Vasilev, посмотрел во vue консоли, значение bask не меняется при нажатии, но когда я вывожу в консоль она меняется

[sickgang]

Andrey Vasilev, я так и делал

[Andrey Vasilev]

sickgang, я просто pug'ом пользуюсь, там что бывает

[Andrey Vasilev]

sickgang, покажи как пишешь

[sickgang]

Andrey Vasilev, Именно значение bask как было так и осталось false, а при нажатии когда в функции выводится через console.log, она меняется

[Andrey Vasilev]

sickgang, скрин компонента

[sickgang]

Andrey Vasilev,
baskedEnd.vue

<template>
  <div class="basket-end_wrapp" v-if="bask">
    <div class="basket-end">
      <span>Спасибо за заказ!</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
   bask: {
    type: Boolean
   }
 }
}
</script>

Пробовал еще вот так в App.vue:

<basketend :bask="baskState" v-if="baskState"></basketend>

[sickgang]

Andrey Vasilev, вот функция

removeItem: function() {
      this.baskState = !this.baskState
      console.log(this.baskState)
    },

[Andrey Vasilev]

sickgang, @click="removeItem" где?

[sickgang]

Andrey Vasilev, он же в другом компоненте.......

[Andrey Vasilev]

sickgang, а должен быть в app.vue, менять там значение, значение прилетит в компонент
ну а если нужно прямо в компоненте обработчик ставить, то прямо там привяжи к чему-нибудь и е*ани метод

[sickgang]

Andrey Vasilev, вот какую ошибку выдает Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "bask"

[sickgang]

Andrey Vasilev, спасибо тебе большое, сегодня в итоге разобрался, все получилось!!!

[Andrey Vasilev]

sickgang, перед задачей лучше изучи поподробнее всё в следующий раз)