using a dynamic v-model as an argument in a function call

Question

using a dynamic v-model as an argument in a function call

I am completely new to using vuejs and currently working on creating a dynamic table. In this table, the left column will contain hidden input fields that will be used to query a database and display the results in a pop-up window for quick referencing. I have managed to successfully build the table using v-for, but I am struggling with binding the dynamic v-models to a JavaScript function that will process the data. If there is a better approach to achieve this functionality, I would greatly appreciate any advice or suggestions. Thank you!

...
<tr v-for="tableRow in rtnUnsubs">
  <td class="unsubCell">
  <input name= "[tableRow.share_id]" v-model="[tableRow.share_id]" value="[tableRow.share_id]">{{ tableRow.share_id }}
  <button v-on:click="getSub">view</button>
  </td>
  <td class="unsubCell">{{ tableRow.unsubscriber_type }}</td>
  <td class="unsubCell">{{ tableRow.unsubscriber_id }}</td>
</tr>
...
<script>
...
getSub(/*v-model from input*/) {
            window.alert(/*perform some actions with v-model*/)
            return;
        }

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Typically, when a click event is bound to a method, the method will receive the event by default. However, you have the flexibility to pass any additional data you wish (including $event if needed along with other arguments).

When you mention "binding v-models", I interpret it as a request to provide the current data.

new Vue({
  el: '#app',
  data: {
    rows: [{
        share_id: 'IT ME'
      },
      {
        share_id: 'THE OTHER ONE'
      }
    ]
  },
  methods: {
    getSub(data) {
      console.log("Working with", data);
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div v-for="tableRow in rows">
    <input name="tableRow.share_id" v-model="tableRow.share_id" value="tableRow.share_id">{{ tableRow.share_id }}
    <button v-on:click="getSub(tableRow.share_id)">view</button>
  </div>
</div>

Answer 2

Typically, when a click event is bound to a method, the method will receive the event by default. However, you have the flexibility to pass any additional data you wish (including $event if needed along with other arguments).

When you mention "binding v-models", I interpret it as a request to provide the current data.

new Vue({
  el: '#app',
  data: {
    rows: [{
        share_id: 'IT ME'
      },
      {
        share_id: 'THE OTHER ONE'
      }
    ]
  },
  methods: {
    getSub(data) {
      console.log("Working with", data);
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div v-for="tableRow in rows">
    <input name="tableRow.share_id" v-model="tableRow.share_id" value="tableRow.share_id">{{ tableRow.share_id }}
    <button v-on:click="getSub(tableRow.share_id)">view</button>
  </div>
</div>

using a dynamic v-model as an argument in a function call

Answer №1

Similar questions

How to format a large number using the toFixed() method in a VueJS template

The email message generated by sendGrid is kept confidential

Create a distributive and an NPM package using one source code

Encountering a problem while trying to pin a message on Discord

The setInterval function does not function properly in IE8 when set to 0

Using yargs to pass parameters/arguments to a Node script through an npm script

Creating a selection area with CSS that appears transparent is a straightforward process

What is the most efficient way to prevent duplicate items from being added to an array in a Vue 3 shopping cart

Switching downlink to top link when scrolling downwards

Creating a Three-Dimensional Bounding Box in THREE.js

What is the process of using AJAX, JavaScript, and HTML to submit data to a remote

Keep a vigilant eye on the peak utilization of memory within the Node.js process

Angular: Modify value when checkbox is ticked

Creating a unique-looking visual representation of progress with arcs

What is the best way to send multiple parameter values from jQuery to a Laravel controller?

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

Tips on how to automatically resize the browser window to a specific width and height once it has been minimized

Vue js not displaying real-time data changes in Percircle Dynamic

Transform the Node.js requests for both GET and POST methods to utilize Ajax

Ways to ensure the synchronous execution of asynchronously invoked functions