ریل تایم نبودن data در vue.js
سلام وقت عالی بخیر نزدیک به یک هفته هست که به یک مشکلی بر خوردم و به هیچ عنوان حلش نتونستم بکنم و ۱ هفته هست که وقتم تلف شده
توضیح برنامه :
در داخلی method تابعی تعریف کردم و اکشن اون تابع بروی یک کلید گذاشتم محتوای داخلی تابع این است که اطلاعات رو از طریق axios دریافت میکنه و اطلاعات دریافت شده رو در this.data ذخیره میکنم این متغییر هم به صورت آرایه است data:[ ]
مشکل : اینکه موقعی که کلید را میزنیم از افزونه vue.js هیچ اطلاعاتی در این داده ذخیره نمیشه
واقعا نمیدونم علت کجاست
اگر کمک کنید و این موضوع رو حل کنید واقعا دعاتون میکنم
ممنون
پاسخها
47جناب آقای خسروی عزیز بنده به جواب رسیدم و میخوام با شما هم در میون بزارم و تشکر ویژ از شما دارم که کمکم کردین و این پیام رو جز بهترین پیام ها مشخص میکنم با اجازتون که یقیه استفاده کنن
موقعی که میخوایم msg رو در دیتا مون ذخیره کنیم باید از این دستور استفاده کنیم
app.datatest=msg[data] s به این صورت کاملا data ریل تایم میشه و هر جا که بخوایم ازش استفاده میکنیم
لطفا کد اون قسمت رو بزارید.(حتما)
دوما اینکه موضوع گفتگو بوده ریل تایم نبودن data در vue.js که برای حل این مشکل باید از سوکت استفاده کنید.
سوما اگه از axios استفاده میکنید مقدار دهی رو باید در response اش بدهید یعنی callback یا promise ای که زمان دریافت پاسخ اجرا میشه.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
data: {
datatest: []
},
methods: {
alert: function () {
axios.get('get').then(function (msg) {
this.datatest = msg['data'];
console.log(this.datatest);
});
}
}});
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
response که عرض کردید اصلا به هیچ عنوان برای vue تعریف نمیشه زیرش خط های قرمز میاره که به معنی شناخته نشدن سین تکسا هستش
آها شما آمدید از function استفاده کردید که کلمه this به فانکشن اشاره میکنه اگه این قسمت رو function (msg) { به صورت arrow function بنویسید مشکل به نظرم حل میشه یعنی:
function (msg) {جای {<=(msg) require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
data: {
datatest: []
},
methods: {
alert: function () {
axios.get('get').then((msg)=>{
});
}
}});
اگر منظورتون این باشه بازم هم خط های قرمز پایین کد ها میاد یعنی نمیشناسه سینتکس ها رو
methods: {
alert: ()=> {
axios.get('get').then((msg)=> {
this.datatest = msg['data'];
console.log(this.datatest);
});
}
}alert رو هم arow function کنید.
دقیقا کد هاتون رو وارد کردم ولی بازم هم سینتکس ها خوانده نمیشود به نطرتون کتابخانه خاصی بایذ نصب بشه در npm چون response رو هم اصلا نمیخونه
و اینکه دارین وقت میزارین مشکلمو حل کنید واقعا ممنونم امیدوارم بتونم جبران کنم لطف جناب العالی رو
اینجا
('get')
url رو دقیقا با / بزارین.
و const axios = require('axios'); در ابتدای کد.
و اگر هم axios رو اضافه نکردین : npm install axios
@ghajarehsan
require('./bootstrap');
const axios = require('axios');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
data: {
datatest: []
},
methods: {
alert: function () {
axios.get('/get').then(function (msg) {
this.datatest = msg['data'];
console.log(this.datatest);
});
}
}});
خطاش برطرف شد؟؟
اینم زدین اضافه کردین npm install axios؟؟
@ghajarehsan
عبارت ها رو اضافه کردم مسله اینه که موقعی که log میگیریم کاملا در consol نشون میده اطلاعات دریافتی از database رو ولی موقعی که دستور log رو خارج از axios مینویسیم دیگه در consol نشون نمیده و همینطور در افزونه vue در firefox هم هیچ تغییر انجام نمیشه
واقعا نمیدوم مشکل کجاست
نه مشکل حل نشد ضمنان من از فریم فورک laravel دارم استفاده میکنم به نظرتون ربطی به این موضوع داره؟؟
بله دستور npm install axios نصب کردم الان ولی درست نشد
@ghajarehsan
همون مساله arrow function که گفتم باهاش بازی کنید و اینکه از msg لاگ بگیرید ببینید اسم شی ای که داده توش ریخته میشه چیه بعد این رو msg['data'] قسمت کلمه data رو به اسم اون صفتی(property) که داخلش داده هست عوض کنید.
@ghajarehsan
با هر فریم وورکی که کار میکنید شما سمت بک اند اومدید یک api نوشتید که بهش درخواست میزنید و اون بهتون پاسخ برمیگردونه. حالا این پاسخ رو میگیرد و در datatest قرار میدید.اون مساله که خارج از axios تعریف نمیشه هم طبیعی هست چون خارج از این شی
el: '#app',
data: {
datatest: []
},
methods: {
alert: function () {
axios.get('/get').then(function (msg) {
this.datatest = msg['data'];
console.log(this.datatest);
});
}
}که نوشتید وجود نداره this.datatest
خیلی ممنون از وقتی که گداشتین تلاش میکنم امیدوارم درست بشه
واقعا ممنون ازتون
با خیلی از سایت های آموزشی کار کردم من متاسفانه هیچ کدومشون پشتیبانی خوبی ندارن.
بله دقیقا داخل شی نیست ولی چیکار باید که msg دریافت شده رو در data دخیره کرد؟؟؟
نظرتون راجع به اینکه respone رو editor من نمیخونه چیه؟؟؟
@ghajarehsan
سمت بک اند ببینید مشکل نداره؟؟
کد لاراول سمت بک اند رو بزارین ببینم.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Test;
class TestControllers extends Controller
{
function index()
{
return view('index');
}
function test()
{
$result = Test::all();
return $result;
}}