mehrab96
6 سال پیش توسط mehrab96 مطرح شد
7 پاسخ

ارسال متغیر vue به لاراول

سلام
من یه کامپوننت ساختم و یه سری داده رو به یه متغیری توی vue js میریزم و اونو loop میکنم و نمایش میدم داخل همون کامپوننت ولی الان میخوام مقدار متغیری که توی vue js ذخیره کردم که ارایه هست رو بفرستم به یه متغییر توی لاراول که از اون مقدار برای فرستادن form خود لاراول استفاده کنم . کسی هست بدونه واقعا گیر افتادم ممنون میشم کمک کنید


ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
1

@mehrabesmailnia96

اول axios رو نصب کنید:

npm install axios

و برای ایجاد یک درخواست POST :

axios.post('/users', {
    firstName: 'Ali',
    lastName: 'Bayat'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

و همچنین سوت بک‌اند (لاراول) به یه روت از نوع POST هم نیاز دارید:

Route::post('users','store@UsersController');

و در کنترلر هم:

use Illuminate\Http\Request;
Class UsersController extends Controller 
{

    public function store(Request $request) 
    {
        $first = $request->firstName;
        $last = $request->lastName;
    }

}

علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
0

برای ارسال داده از کامپوننت به کامپوننت دیگه در حالت ساده میتونید از prop ها استفاده کنید و اگر پیچیده‌تر بود از اِوِنت ها. و برای ارسال داده از Vue به لاراول از درخواست ایجکس.


محمد صادقیان
تخصص : برنامه نویس وب - فریم ورک Lara...
@drcode.ir 6 سال پیش مطرح شد
0

بله به قول آقای بیات خیلی راحت می تونید با استفاده از axios یا همون ajax هر دیتایی رو بفرستید به یکی از توابع لاراول و استفاده کنید.


mehrab96
@mehrabesmailnia96 6 سال پیش مطرح شد
0

درخواست axios رو چطوری بفرستم و داخل کنترلر چطوری باید اون مقدار رو return کنم ؟ میشه بیشتر توضیح بدین؟


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
1

@mehrabesmailnia96

اول axios رو نصب کنید:

npm install axios

و برای ایجاد یک درخواست POST :

axios.post('/users', {
    firstName: 'Ali',
    lastName: 'Bayat'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

و همچنین سوت بک‌اند (لاراول) به یه روت از نوع POST هم نیاز دارید:

Route::post('users','store@UsersController');

و در کنترلر هم:

use Illuminate\Http\Request;
Class UsersController extends Controller 
{

    public function store(Request $request) 
    {
        $first = $request->firstName;
        $last = $request->lastName;
    }

}

محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 6 سال پیش مطرح شد
0

@mehrabesmailnia96 میتونید از تابع fetch هم استفاده کنید. و نیازی به نصب هم نداره کار باهاشم سادست میتونید دربارش سرچ کنید.


mehrab96
@mehrabesmailnia96 6 سال پیش آپدیت شد
0

این کاری که گفتید رو انجام دادم ولی کاملا به نتیجه نرسیدم
'export default {
data(){
return{
newtags:'',
tags:[],
firstName : ''
}
},
methods: {
addTags(){
if (this.newtags != ''){
this.tags.push(this.newtags);
this.newtags =null;
}
axios.get('/admin/articles/create' ,{
tags: this.tags,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
}'

این بخش برای vue که مقدار tags رو میخوام طبق گفته شما بفرستم

public function create(Request $request)
{
$first = $request->firstName;
return view('Admin.articles.addArticle' ,compact('first'));
}
این بخش کنترلر هم همیکارو میکنم ولی نمیتونم مقدار tags رو بصورت ایجکس ببینم

دقیقا میخوام با هر بار اضافه شدن مقدار tags اطلاعات tags رو به صورت ایجکس بفرسته و نمایش بده


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
0

@mehrabesmailnia96

نوع درخواست axios تون رو get زدید.. عوضش کنید به axios.post
و اینکه از کامند axios باید در جای درستش استفاده کنید..

برای مثال اگر میخواهید وقتی تگ اضافه میکنید, در دیتابیس ذخیره بشه باید از axios داحل متد addTags استفاده کنید:

addTags()
{
    if (this.newtags != ''){

    this.tags.push(this.newtags);
    axios.post('/tags', {
        tagName: this.newtags
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    this.newtags =null;
}

و اگر میخواهید بصورت get استفاده کنیدو رایج ترین جا براش داخل ()mounted هست:

export default {
 data() {
    return {
        tags: ''
    }
 },
  mounted() {
    axios.get('/tags')
      .then(function (response) {
        this.tags = response.data
      })
      .catch(function (error) {

        console.log(error);
      });    
    }
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام