ajax vue data,vue.js - Display data in a Vue component with ajax - Stack Overflow

曾经终败给现在 2022-09-03 11:22 121阅读 0赞

I seem to be misunderstanding how to pass data to a Vue.js component with an ajax call.

My understanding of how this should work:

I need to create an empty object called campaigns in the data section of my component.

Then call method "fetchCampaigns" on page ready to replace the data object.

fetchCampaign method completes an AJAX call and inside of the success callback use this.$set('campaigns', campaigns) to replace the empty campaign object with the newly returned campaign object

Use v-for on the template to iterate through the campaign object and access values with @\{ \{campaign.type\}\}

My html (I am use vue router, vue resource and laravel blade) :

## Type: *@\{ \{campaign.id\}\}* ##

## @\{ \{campaign.title\}\} ##

Vue component

Vue.component('app-page', \{

template: '\#campaignBlock',

data: function() \{

return\{

campaigns: \[\]

\}

\},

ready: function () \{

this.fetchCampaigns();

\},

methods: \{

fetchCampaigns: function () \{

var campaigns = \[\];

this.$http.get('/retention/getCampaigns')

.success(function (campaigns) \{

this.$set('campaigns', campaigns);

\})

.error(function (err) \{

campaigns.log(err);

\});

\},

\}

\})

This is the result of my ajax call from console:

\{"campaigns":\[\{"id":1,"user\_id":2,"target\_id":1,"name":"Test Campaign","description":"This is a test Campaign","target":"Onboarding","created\_at":"-0001-11-30 00:00:00","updated\_at":"-0001-11-30 00:00:00","deleted\_at":null\}\]\}

I'm not sure why I can't get my vue component to recognize the new data. Anyone see what I'm missing? TIA

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关 php+ajax+vue接口

<?php $host='localhost'; $user='shopping'; $pass='000000';

超、凢脫俗/ 2023年01月01日 02:48/ 0 赞/ 127 阅读

相关 html5 file ajax,javascript - Using HTML5 file uploads with AJAX and jQuery - Stack Overflow

With jQuery (and without FormData API) you can use something like this: function readFi

清疚/ 2022年10月07日 04:49/ 0 赞/ 136 阅读

相关 ajax vue data,vue.js - Display data in a Vue component with ajax - Stack Overflow

I seem to be misunderstanding how to pass data to a Vue.js component with an ajax call.

曾经终败给现在/ 2022年09月03日 11:22/ 0 赞/ 122 阅读

相关 vue2.0发送ajax,Vue2使用ajax发送请求

Vue2使用ajax发送请求 ![beecc95b0a32b57cabb7b6dfafed45b3.png][] 2年前阅读 6728 评论 0 喜欢 0 \\\

た入场券/ 2022年09月03日 06:28/ 0 赞/ 281 阅读

相关 ajax https 403,javascript - django ajax post 403 forbidden - Stack Overflow

using django 1.4 im getting a 403 error when i try to do a post from my javascript do my

青旅半醒/ 2022年09月03日 06:22/ 0 赞/ 164 阅读

相关 TableSorter - Appending table data with ajax

$(document).ready(function() { $("table").tablesorter(); $("ajax-a

青旅半醒/ 2022年06月08日 02:11/ 0 赞/ 154 阅读

相关 vue 发送ajax请求

一、简介　　1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现　　2、axios是一

「爱情、让人受尽委屈。」/ 2022年05月17日 00:20/ 0 赞/ 284 阅读

相关 vue发起ajax到node,返回值赋给vue的data()

selectAll: function () { var self = this; $.ajax({

妖狐艹你老母/ 2022年05月16日 11:59/ 0 赞/ 163 阅读

相关 vue(12)ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

柔情只为你懂/ 2022年01月11日 08:05/ 0 赞/ 162 阅读

相关 vue使用ajax

1.Vue的Ajax基本用法在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址： [https://cd

阳光穿透心脏的1/2处/ 2021年12月08日 17:51/ 0 赞/ 264 阅读