Exploring VueJs 2.0: Iterating through components and updating properties

Question

Exploring VueJs 2.0: Iterating through components and updating properties

Searching for the optimal method to handle looping components has been my current focus. Below is an example of my coding dilemma.

What I am attempting to accomplish is having payments data in my main component loop into child components.

<tr v-for="payment in payments"
is="component-payment-item"
:payment="payment
v-on:toggleReported="togglePaymentReported"">
 </tr>

Whenever a child component needs to mark a payment as reported, it sends an event back up to the parent component. To tackle this issue, I coded the following solution:

togglePaymentReported(payment) {
    payment.reported = ! payment.reported;
}

Although the function executes properly, the changes do not reflect in the child component. I have considered directly modifying the payment within the array, assuming it would be passed by reference and updated in the child component as well.

In vue 1.0, adjusting the child component itself was feasible but not recommended and no longer supported in vue 2.0. What approach should I adopt in this scenario?

javascript vue.js

Answer 1

Answer №1

Make sure to include the current payment as an argument in your togglePaymentReported method.

pb = Vue.extend({
  template: '#paybutton-template',
  props: ['payment'],
  methods: {
    toggle: function() {
      this.$emit('toggle');
    }
  }
});

vm = new Vue({
  el: '#app',
  components: {
    'payment-button': pb
  },
  data: {
    payments: []
  },
  methods: {
    handleToggle: function(payment) {
      payment.paid = !payment.paid;
    }
  },
  mounted: function() {
    // Simulating setting from ajax
    setTimeout(() => {
      this.payments = [{
        id: 1,
        paid: false
      }, {
        id: 2,
        paid: false
      }];
    }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <payment-button v-for="payment in payments" :payment="payment" v-on:toggle="handleToggle(payment)"></payment-button>
</div>

<template id="paybutton-template">
  <div>
    {{payment.id}}: {{payment.paid}}
    <button @click="toggle">Pay</button>
  </div>
</template>

Answer 2

Make sure to include the current payment as an argument in your togglePaymentReported method.

pb = Vue.extend({
  template: '#paybutton-template',
  props: ['payment'],
  methods: {
    toggle: function() {
      this.$emit('toggle');
    }
  }
});

vm = new Vue({
  el: '#app',
  components: {
    'payment-button': pb
  },
  data: {
    payments: []
  },
  methods: {
    handleToggle: function(payment) {
      payment.paid = !payment.paid;
    }
  },
  mounted: function() {
    // Simulating setting from ajax
    setTimeout(() => {
      this.payments = [{
        id: 1,
        paid: false
      }, {
        id: 2,
        paid: false
      }];
    }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <payment-button v-for="payment in payments" :payment="payment" v-on:toggle="handleToggle(payment)"></payment-button>
</div>

<template id="paybutton-template">
  <div>
    {{payment.id}}: {{payment.paid}}
    <button @click="toggle">Pay</button>
  </div>
</template>

Exploring VueJs 2.0: Iterating through components and updating properties

Answer №1

Similar questions

Navigate-to-pattern Utilize regular expression to match the pathway

Different ways to maintain the original syntax highlighting colors in JavaScript console

Encountering an issue with inability to resolve the 'react-navigation-stack' module. Still seeking a solution to this problem

Changing the text color of the Vuetify Table header is a simple way to customize the

The rows-per-page menu option in Vuetify suddenly vanishes

Issue: "The argument provided must be a specific string, not a string or an array of strings."

Is it possible to make a form field inactive based on another input?

What methods can I use to sort content by its rating?

Eliminating clutter in bespoke event handlers - eliminating the necessity for the 'event' parameter

Executing a NodeJS function from a JavaScript function

Error message encountered when attempting to rotate an object in three.js: "Object is undefined"

HTML embedded content is not appearing on the React webpage

Output each element of an array in Vuejs2 with a line break between each

Errors can arise in Discord.js when encountering "undefined" before the first array object in an embed

node.js: The Yahoo weather jQuery plugin fails to display any data

Retrieve a boolean value through an Ajax call from a C# function using T4MVC

Uniqid in React fails to generate unique IDs

What is the best way to add permissions to each role in JavaScript?

The lookAt method in THREE.js is not functioning properly when called after the rendering process

display and conceal elements and refresh action