dauren101
@dauren101
Python, PHP developer

Vue.js передать данные из view about в app?

//app
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">О нас</router-link> |
      <router-link to="/about" @update-cart="updateCart">Завтраки</router-link> |

      <router-link  :to="{ name: 'Cart', params: { id: [{'sd':1},{'sd':2},{'sd':3}] } }">Мой заказ</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      order:[
        { message: 'Foo' },
        { message: 'Bar' }
      ],
    }
  },
      methods: {
      updateCart(e) {
         this.order.push(e);
     
      },
   
    },

  
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

//about
<template>
 <div class="container">
    <div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Омлет</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-danger">-</a>
        <a href="#" class="btn btn-primary" @click="addToCart">+</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">рубыа</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-danger">-</a>
        <a href="#" class="btn btn-primary">+</a>
      </div>
    </div>
  </div>
</div>
</div>
</template>


<script>
export default {
  props: ['message'],
 data(){
    return {
      
    }
  },
   methods:{
        addToCart() {
        this.$emit('update-cart', {message:'dauren'})
      }
  }
}
</script>

пытаюсь из about передать данные в app, чтобы затем весь массив передавать в cart.vue
Не получается из about принять в app.vue.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
fallus
@fallus
Ну тк на <router-view /> повесьте обработчик:
<router-view @update-cart="updateCart" />

updateCart(e) {
  this.order.push(e); // запушится {message:'dauren'}
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы