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

- 7 ماه پیش
توسط علی بیات آپدیت شد
mehrab96 ( 1230 تجربه )
7 ماه پیش

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

بهترین پاسخ انتخاب شده توسط mehrab96
علی بیات
7 ماه پیش

@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;
    }

}
علی بیات ( 124307 تجربه )
7 ماه پیش
تخصص : توسعه دهنده ارشد وب

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

محمد صادقیان ( 17310 تجربه )
7 ماه پیش
تخصص : برنامه نویس وب - فریم ورک Laravel

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

mehrab96 ( 1230 تجربه )
7 ماه پیش

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

علی بیات ( 124307 تجربه )
7 ماه پیش
تخصص : توسعه دهنده ارشد وب

@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;
    }

}
محسن بستان ( 14665 تجربه )
7 ماه پیش
تخصص : توسعه دهنده وب

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

mehrab96 ( 1230 تجربه )
7 ماه پیش

این کاری که گفتید رو انجام دادم ولی کاملا به نتیجه نرسیدم
'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 رو به صورت ایجکس بفرسته و نمایش بده

علی بیات ( 124307 تجربه )
7 ماه پیش
تخصص : توسعه دهنده ارشد وب

@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);
      });    
    }
}
برای ارسال پاسخ باید وارد سایت شوید