Vue js в laravel .. вычисляемый метод не определен
Я пытался получить данные, но он говорит, что вычисленный метод не определен в инструменте vue dev мои методы
<script>
export default{
name:"about",
mounted(){
this.$store.dispatch('getFrontAbouts');
},
computed:{
about(){
return this.$store.getters.about;
}
},
}
</script>
store2.js файл, где я получаю эти данные с помощью вызова axios
export default{
state: {
aboutData:[],
},
getters:{
about(state){
return state.aboutData;
},
},
actions:{
getFrontAbouts(data){
axios.get("get-front-about").then((response)=>{
data.commit('about',response.data.about);
}).catch((error)=>{
})
},
},
mutations: {
about(state,data){
return state.aboutData = data;
},
}
}
мой файл контроллера, из которого я получаю данные
публичная функция about () {
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
}
вот мой компонент vue, в котором выполняется вычисление метода
<div class = "row topmargin bottommargin gutter-lg-50 align-items-center">
<div class = "col-lg-12 p-lg-5">
<div class = "heading-block border-bottom-0 mb-0">
<h2 class = "nott font-weight-semibold mb-4 text-secondary" style = "color: #1ABC9C;">Our Story</h2>
<p v-if = "about">{{about.about_us}}</p>
<div class = "row">
<div class = "col-6 col-sm-6 mb-4">
<div class = "counter color font-weight-semibold"><span data-from = "1" data-to = "3" data-refresh-interval = "2" data-speed = "600"></span>+</div>
<h5 class = "mt-0 font-weight-medium">Branches</h5>
</div>
<div class = "col-6 col-sm-6 mb-4">
<div class = "counter color font-weight-semibold"><span data-from = "1" data-to = "37" data-refresh-interval = "11" data-speed = "900"></span>+</div>
<h5 class = "mt-0 font-weight-medium">Single Studios</h5>
</div>
<div class = "col-6 col-sm-6 mb-4">
<div class = "counter color font-weight-semibold"><span data-from = "1" data-to = "21" data-refresh-interval = "3" data-speed = "1000"></span>+</div>
<h5 class = "mt-0 font-weight-medium">Events per Month</h5>
</div>
<div class = "col-6 col-sm-6 mb-4">
<div class = "counter color font-weight-semibold"><span data-from = "100" data-to = "4500" data-refresh-interval = "100" data-speed = "1500"></span>+</div>
<h5 class = "mt-0 font-weight-medium">Active Members</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class = "row justify-content-center topmargin-sm">
<div class = "col-md-5 offset-md-1">
<h3 class = "text-dark"><i class = "icon-line-circle-check color mr-1 position-relative" style = "top: 2px;color: #1ABC9C;"></i> Why do you choose DreamsEye?</h3>
<p v-if = "about">{{about.choice_us}}</p>
</div>
<div class = "col-md-5 pl-md-5">
<h3 class = "text-dark"><i class = "icon-line-circle-check color mr-1 position-relative" style = "top: 2px;color: #1ABC9C;"></i> Our Address</h3>
<p v-if = "about">{{about.address}}</p>
</div>
<div class = "clear"></div>
</div>
</div>
вот мой скриншот инструмента vue dev введите описание изображения здесь
вот мой ответный скриншот
Я показал, где вызывается вычисляемый метод ... когда я вызвал его для сайта администратора, он работал отлично, но для клиентского сайта он говорит, что undefined в инструменте vue dev
Нет, это не так. Где-то в вашем шаблоне Vue должно быть что-то вроде: v-for = "item of About". Вот где возникает ошибка. Вы этого не показываете. Вы показываете, что происходит, когда выполняется вычисленное свойство About. Но ваша проблема в том, что он даже не выполняется.
Хорошо ... Я понял ... Итак, мне нужно использовать v-for ... но я не хочу его зацикливать ... я беру только строку ... это проблема ??? я должен использовать v-for ??? ... я редактирую вопрос и покажу вам, где он выполняется
Хорошо, спасибо, это помогает. В вашем бэкэнде вы отправляете массив. В вашем интерфейсе вы пытаетесь получить доступ к этому массиву с помощью ключей, но ваш бэкэнд не отправляет ассоциативный массив. Ваш бэкэнд-код должен быть: return response()->json(['about' => $about],200); Обратите внимание на =>.
Ответы 3
Вы обращаетесь к вычисляемому свойству с помощью about, но вычисленное свойство определяется как About.
JavaScript чувствителен к регистру.
Извините, я изменил свой код в редакторе, но не здесь ... Я отредактировал его здесь ... Я удалил заглавную букву .... Но все равно показывает то же undefined
Затем покажите нам точную ошибку, которую вы получаете, включая строку, обозначенную ошибкой.
Теперь элементы html ушли ... я знаю, что вы пытаетесь сказать ... но я хочу сказать, что моя вкладка сети получает данные, но инструменты vue dev говорят undefine .... Для пояснения я показываю вам мой инструмент vue dev и сеть скриншоты вкладок
Во-первых, это опечатка, заменив этот About() на этот about(). это потому, что vuejs чувствителен к регистру.
Во-вторых, когда вы работаете с типом массива, вам нужно перебрать его, чтобы получить данные каждого столбца, поэтому попробуйте это
<div v-for = "abt in about" :key = "abt.id"class = "heading-block border-bottom-0 mb-0">
<h2 class = "nott font-weight-semibold mb-4 text-secondary" style = "color: #1ABC9C;">Our Story</h2>
<p v-if = "about">{{abt.about_us}}</p>
Вы не читали комментарии ... вы сказали мне удалить заглавные буквы, и я удалил ... и сказал, что вы все еще не работаете ...
ты пробовал то, что я сейчас опубликовал?
элементы пропали ... Я отредактировал свой вопрос, посмотрите, пожалуйста ...
вы, ребята, просто посмотрите на мои методы и компонент vue ... Но настоящая проблема была в моем контроллере, где ...
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
к
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about'=>$about],200);
Это не объясняет вашу первоначальную проблему «вычисляемый метод не определен». Оба других ответа верны, просто в вашем коде была и вторая проблема, которая решается вашим собственным ответом.
Сначала вы жалуетесь, что вам никто не помогает. Чем мы вам поможем, мы даже найдем решение вашей проблемы, что приведет ко второй проблеме. Вот что такое отладка. Я нахожу невероятно грубым, что вы говорите, что ответы неверны, а они нет, и даже отказываетесь от правильного ответа.
Извините за мой комментарий ... Я удалил его ... Спасибо, что помог мне ... еще раз извините
Возможно, вы не получили ответов, потому что кажется, что вы показываете неправильный код. Вы говорите, что ошибка в том, что вычисленный метод не определен. Итак, покажите нам, где вы вызываете метод и под каким именем. Совет: не используйте заглавные буквы для вычисляемых свойств. Это не соответствует стандартам кодирования и даже может быть причиной вашей проблемы.