CODEWITHSUNDEEP
javascriptlaravelvue.jsaxios
ilham
ilham

Reputation: 21

access to observer object returned by axios -vuejs

trying to fetch data returnd my url in axios function. but the data is not showing up.

console.log return data with this format

enter image description here

this is my code

                <tbody>
                    <tr v-for="val in values">
                        <td style="width: 25%" class="text-center">{{ val.id }}</td>
                        <td style="width: 25%" class="text-center">{{ val.value }}</td>
                        <td style="width: 25%" class="text-center">{{ val.price }}</td>
                        <td style="width: 25%" class="text-center">
                            <button class="btn btn-sm btn-primary">
                                <i class="fa fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: 'attribute-values',
        props: ['attributeid'],
        data() {
                return {
                    values: [],
                    value: '',
                    price: '',
                    currentId: '',
                    addValue: true,
                    key: 0,
                }
            },
    mounted(){
        this.loadValues();
    },
        methods: {
            loadValues() {
                let attributeId = this.attributeid;
                axios.post('/admin/attributes/get-values', {
                    id: attributeId
                }).then (response => {
                console.log('hello');
                    let result = response.data;
                     this.values=result;
                    console.log(this.values);
                return this.values;
                }).catch(error => {
                    console.log(error);
                });
            },
        }
    }
</script>

the value array is returned correctly but still cant fetch it in my table. any idea. thank you in advance.

Upvotes: 0

Views: 1108

Answers (2)

Noah Stahl
Noah Stahl

Reputation: 7623

It's likely caused by the use of this within an arrow function in your response handler. Per the Vue docs:

Don’t use arrow functions on an options property or callback

Try changing:

then (response => {

to:

then (function(response) {

Upvotes: 1

FilaMarek
FilaMarek

Reputation: 3

I had similar problem therefore i will share partially my code, hopefully it will help.

>         <ul>
>           <li v-for="meeting in meet" :key="meeting.meeting">{{ meeting.meeting }}</li>
>         </ul>
>       </div>
> 
> 
here meetingName is from Json and this.meeting is fromfunction

>   data: () => {
>     return {
>       meet: this.meeting,
>       date: this.date,
>       meetingName: this.meeting, 


    };   
 },


  methods: {
>     async Today() {
>       await axios
>         .get("http://localhost:3001/today")
>         .then((response) => (this.meet = response.data))
>         .catch((err) => (this.meet = "No DB connection"));
>       return this.meet;
>     },

Upvotes: 0

Related Questions