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

- 2 هفته پیش
توسط علی بیات آپدیت شد
mehrab96 ( 530 تجربه )
2 هفته پیش

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

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

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

}
علی بیات ( 28322 تجربه )
2 هفته پیش

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

محمد صادقیان ( 9085 تجربه )
2 هفته پیش

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

mehrab96 ( 530 تجربه )
2 هفته پیش

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

علی بیات ( 28322 تجربه )
2 هفته پیش

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

}
محسن بستان ( 2795 تجربه )
2 هفته پیش

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

mehrab96 ( 530 تجربه )
2 هفته پیش

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

علی بیات ( 28322 تجربه )
2 هفته پیش

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