Vue.js - Get data from modal and save to array

Question

I have a modal with data from Vue.js, what I want to accomplish is, whenever the "add cart" button is clicked, the data inside the modal is saved to another array(itemCart) inside vue.

Vue.js:

new Vue({
el: '#item-data',
data () {
  return {
    data:[],
    selectedUser:'',
    itemCart: ''
  }
},
mounted () {
  axios.get('api link here', {
    headers : {
      Authorization: 'Bearer ' + access_token
    },
    params: {
      limit: 250
    }
  })
    .then((response) => {
      // handle success
      this.data = response.data.items
      removeLoader();
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
    .then(function () {
      // always executed
    });
},
methods:{
  sendInfo(items) {
    this.selectedUser = items;
  },
  addCart: function(cartItems){
    this.itemCart.push({cartItems});
    console.log(cartItems);
  }
}
  })

Modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <a href="#" class="latest-product__item">
                        <div class="latest-product__item__pic">
                            <img src="img/item_image_placeholder.jpg" alt="">
                        </div>
                        <div class="latest-product__item__text">
                            <span>{{selectedUser.item_name}}</span>
                            <div v-for="variant in selectedUser.variants">
                                <h6>Php {{variant.default_price}}/piece</h6>
                            </div>
                            <div class="product__details__quantity">
                                <div class="quantity">
                                    <div class="pro-qty">
                                        <input type="text" value="1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-success btn-block" @click="addCart">Add to Cart</button>
                </div>
              </div>
            </div>
          </div>

I have tried placing v-model inside the input tag in the modal, but i get an error that says its not defined on the instance. How do I achieve this?

From the {{selectedUser.item_name}}, {{variants.default_price}}, and the input — Ryan
– Ryan, Commented Jun 5, 2020 at 20:05

JakeParis · Accepted Answer · 2020-06-05 20:09:03Z

0

You will need to add a method on the modal (either inline or in the methods key) which does specifically what you want it to.

Just a rough idea of what I mean:

<button 
   type="button" 
   class="btn btn-success btn-block" 
   @click="() => addCart( {
          item_name: selectedUser.item_name,
          price: variants.default_price,
      })"
>Add to Cart</button>

Obviously you'll have to work with that to make it do what you want.

answered Jun 5, 2020 at 20:09

JakeParis

11.2k6 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - Get data from modal and save to array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related