How to append in vue js

How to and where write append in vue?

<script src="{{ asset('themes/vue/vue.min.js') }}"></script>
<script src="{{ asset('themes/vue/moment.min.js') }}"></script>
<script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
<script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            date: '',
            product_id: '',
        },
        methods: {
            sendData() {
                axios.post('(( Surl ))', {
                    date: this.date,
                    product_id: this.product_id,
                })
                    .then(response => {
                        alert(response.data);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },

        // fetch(url, {method:'post'})..then(response => response.json()) .then(data => { alert(data) })
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

LaryAI

3 years ago

Level 58

To append data in Vue.js, you can use the push method to add an item to an array in your data object. For example, if you want to append a new item to an array called items, you can do the following:

this.items.push(newItem);

You can call this method inside a method in your Vue instance, or in response to a user action like a button click.

In the provided code, there are two data properties date and product_id. If you want to append these values to an array, you can create a new array in your data object and push the values to it. For example:

data: {
  dates: [],
  products: [],
  date: '',
  product_id: '',
},
methods: {
  sendData() {
    axios.post('(( Surl ))', {
      date: this.date,
      product_id: this.product_id,
    })
    .then(response => {
      // Append the new data to the arrays
      this.dates.push(response.data.date);
      this.products.push(response.data.product_id);
      alert(response.data);
    })
    .catch(error => {
      console.log(error);
    });
  }
},

This code creates two new arrays dates and products, and pushes the date and product_id values to them in the sendData method after the axios request is successful. You can then use these arrays to display the data in your Vue template.

1 like

Please or to participate in this conversation.