gpt4 book ai didi

javascript - Laravel、Vue Livesearch - Ajax 响应问题之后

转载 作者:太空宇宙 更新时间:2023-11-04 15:38:16 24 4
gpt4 key购买 nike

我可能面临一个微不足道的问题,但我两天来一直在四处寻找,但我自己无法找到解决方案。我想使用 Vue 和 Laravel 创建一个 Livesearch。

搜索输入.vue

<template>
<div id="search-input">
<input placeholder="Search" v-model="SearchText" type="text" @keyup="sendSearch"/>
</div>
</template>

<script>
export default {
data(){
return {
SearchText: ''
}
},
methods: {
sendSearch(){
this.$emit('searchsent', {
searchinputparam: this.SearchText,
});
}
}
}
</script>

搜索.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatroom</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

<div id="app2">
<h1>Search</h1>
<search-input v-on:searchsent="searchinputfct"></search-input>
<search-output v-for="output in responses2" v-bind:output="responses2"></search-output>
<!--
<div>
<h2>Ausgabe</h2>
<ul v-for="response in responses2">
<li>
@{{ response.ID }}
</li>
</ul>
</div>
-->
</div>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>

app.js 文件

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));
Vue.component('search-input', require('./components/SearchInput.vue'));
Vue.component('search-output', require('./components/SearchOutput.vue'));

const app = new Vue({
el: '#app2',
data: {
responses2:[]
},
methods: {

searchinputfct(searchinputparam){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'get',
url: '/livesearch',
data: {text: searchinputparam},
datatype: "JSON",
success: function(data)
{
//JSON.parse(data);
JSON.stringify(data);
//console.log(data);
this.responses2 = data;
//console.log(typeof(this.responses2));
//console.log(this.responses2.Object.first_name);
//console.log(this.responses2);
//var _len = data.length;
var _len = this.responses2.length;
var post, i;

for (i = 0; i < _len; i++)
{
//debugger
post = this.responses2[i];
console.log(post.first_name);
}
}
});

}
},
});

我的回复:[对象,对象,对象],我可以轻松地 console.log,正如您在 app.js 文件的 for 循环中看到的那样但之后我无法更具体地刷新我的 search.blade.php 我找不到 reactiv vue.js 的好例子我的 SearchOutput.vue

<template>
<div id="search-output">
<p>{{ output.ID }}</p>
<p>aha</p>
</div>
</template>

<script>
export default {
props: ['output']
}
</script>

我不知道如何将 SearchOuput.vue 中的响应显示为 <li>或者甚至是简单的<p> 。预先感谢任何帮助,非常感谢。 :)

最佳答案

我的错误是正如 Bert Evans 所说,在回调函数中使用了 this。非常感谢伯特·埃文斯 <3

methods: {

searchinputfct(searchinputparam){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var self = this;
$.ajax({
type: 'get',
url: '/livesearch',
data: {text: searchinputparam},
datatype: "JSON",
success: function(data)
{
//JSON.parse(data);
//console.log(data);
//self.responses2 = JSON.stringify(data);
self.responses2 = data;
console.log(self.responses2);
//console.log(typeof(this.responses2));
//console.log(this.responses2.Object.first_name);
//console.log(self.responses2);
//var _len = data.length;
/*
var _len = data;
var post, i;
console.log(_len);
for (i = 0; i < _len; i++)
{
//debugger
post = data;
//console.log(self.responses2[i]);
//console.log(post.first_name);
}
*/
}
});

}

},

关于javascript - Laravel、Vue Livesearch - Ajax 响应问题之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44117661/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com