D
D
Dauren S2020-08-27 08:36:27
Vue.js
Dauren S, 2020-08-27 08:36:27

Vue.js pass data from view about to 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>

I'm trying to transfer data from about to app, so that then I can transfer the entire array to cart.vue
It does not work from about to accept in app.vue.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
fallus, 2020-08-27
@dauren101

Well, maybe <router-view />hang up the handler:
<router-view @update-cart="updateCart" />

updateCart(e) {
  this.order.push(e); // запушится {message:'dauren'}
},

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question