Post data from row with vue.js

Question

I have a table with a dropdown select that can be used to modify a value. this select uses v-for to return the values. If a user clicks save, the row needs to be updated. v-model does not do the trick unless I can make it dynamic somehow. But I actually do not have a clue what would be the right way to do this.

<template>  
    <div id="php_vhost_settings">

        ...

            <div class="table-responsive" style="overflow: visible;">
                <table class="table" v-show="!loading">
                    <thead>
                        <tr>
                            <th>Domain</th>
                            <th>Document root</th>
                            <th>Version</th>
                            <th>PHP-fpm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="vhostversion in vhostVersions">
                            <td>{{ vhostversion.vhost }}</td>
                            <td>{{ vhostversion.documentroot }}</td>
                            <td>
                                <div class="form-group">
                                    <select class="form-control" data-placeholder="Choose a Category" tabindex="1" v-model="formVhostVersion.version">
                                        <option 
                                            v-for="installed in installedVersions.versions" 
                                            :value="installed" 
                                            :selected="(installed === vhostversion.version)"
                                        >{{ installed }}</option>
                                    </select>
                                </div>
                            </td>
                            <td>
                                {{ vhostversion.php_fpm }}
                            </td>
                            <td>

                                <div class="btn-group m-r-10 pull-right">
                                    <button @click="updatePhpVhostVersion()" class="btn btn-primary waves-effect waves-light" type="button">Save</button>
                                    <button @click="showEditPhpIni(vhostversion)" class="btn btn-default waves-effect waves-light" type="button">Edit php.ini</button>
                                </div>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

      ...

    </div>
</template>

The JavaScript:

<script>
export default {
    /*
     *  component's data.
     */
    data() {
        return {
            installedVersions: [],
            vhostVersions: [],
            vhostVersion: [],
            errors: '',
            modalTitle: '',
            modalContent: '',
            loadingMessage: '',
            loading: false,
            formVhostVersion: {
                vhost: '',
                version: '',
                hostname: hostname,
                username: username
            },
        };
    },

   // ....

        updatePhpVhostVersion() {
            console.log(this.formVhostVersion);

            axios.post('/api/php/updatevhost', this.updateVhostVersion)
                .then(response => {
                    this.prepare();
                });
        },

....
    }
}

</script>

craig_h · Accepted Answer · 2017-06-10 14:09:58Z

1

If you re-arrange your data structure you can simply bind to the index on an array of objects. It's a little difficult to see exactly what you are doing but as a simplified version (which you will probably need to adjust to your needs) you can do:

<template>
  <table>
    <tr v-for="(vhostversion, index) in vhostVersions">
      <td>{{ vhostversion.vhost }}</td>
      <td>{{ vhostversion.documentroot }}</td>
      <td>
        <div class="form-group">
          <select v-model="vhostVersions[index].version">
            <option value="foobar">Foobar</option>
            <option value="bazqux">Bazqux</option>
          </select>
        </div>
      </td>
      <td>
        <button @click="updatePhpVhostVersion(index)">
          Save
        </button>
      </td>
    </tr>
  </table>
</template>

<script type="text/javascript>
export default{
  methods: {
    updatePhpVhostVersion(index) {
      console.log('update:' + this.vhostVersions[index].vhost + ' to ' + this.vhostVersions[index].version)
    }
  },
  data: {
    vhostVersions: [{
      vhost: 'foo',
      documentroot: '/public',
      version: 'foobar'
    }, {
      vhost: 'bar',
      documentroot: '/public',
      version: 'bazqux'
    }]
  }
}
</script>

By including the index in v-for I now know what record to update. Here's the JSFiddle: https://jsfiddle.net/vy07r9ht/

answered Jun 10, 2017 at 14:09

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

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

1 Comment

Odyssee Over a year ago

Thanks!! I'll try it out when I'm at home. Yesterday I came up with a quick fix <select v-on:change="setFormVhostVersions"> this worked, but had some issues...

Collectives™ on Stack Overflow

Post data from row with vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related