Y
Y
Yaroslav2018-01-28 21:10:19
Vue.js
Yaroslav, 2018-01-28 21:10:19

How to output the result of ajax request to a specific table row in vue (vuetable2)?

Hello! I'm new to vue, I understand, don't kick too much with your feet.
How, when typing in input, display the result in the line in which this input is located?
I'm using vue 2 + vuetable2, props contains information about the string:

'use strict';

Vue.use(Vuetable);
new Vue({
    el: '#app',
    data: {
        fields: ['name', 'email','birthdate','nickname','__slot:search','__slot:actions'],
        sectionVal: []
    },
    methods: {
        section: function (value, props) {
            fetch('/r.php')
                .then((response) => {
                    return response.json()
                })
                .then((json) => {
                    this.sectionVal = json
                })
                .catch((error) => {
                    console.log(error)
                })
        }
    },
})

<div id="app">
    <div class="ui container">
        <vuetable ref="vuetable"
                  api-url="https://vuetable.ratiw.net/api/users"
                  :fields="fields"
        >
            <template slot="actions" scope="props">
                <div class="table-button-container">
                    <input type="text" @keyup="section($event.target.value, props)">
                    <div>
                        <div v-for="val in sectionVal">{{ val }}</div>
                    </div>
                </div>
            </template>
            <template slot="search" scope="props">
                <div class="table-button-container">
                    <input type="text">
                </div>
            </template>
        </vuetable>
    </div>
</div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-01-28
@CubaJas

The first thing you should pay attention to is the sectionVal that you are trying to display, it is the same for all lines. So you will have the same everywhere. Probably, it is worth making sectionVal an object, the keys will be the id of the rows, the values ​​will be what you will receive as a result of your request.
Well, then everything is simple - in the section method, simply update sectionVal by the id of the line, like this (of course, there is no request, the entered data is simply duplicated, but I think the principle is clear).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question