你好,我使用Laravel 9和Vue.js 3,与Axio和我试图fecht一些数据从我的数据库,出现在一个选择列表选项内,但我没有得到任何东西(既没有任何错误,只是空白数据...)
我创建了我的模型Produto
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Produto extends Model
{
use HasFactory;
protected $table = "produto";
protected $guarded = [];
}
创建了正确的迁移
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('produto', function (Blueprint $table) {
$table->id();
$table->string("nome");
$table->double("preco");
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('produto');
}
};
已创建我的控制器ProdutoController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Produto;
class ProdutoController extends Controller
{
/**
*Retorna os dados dos Produtos
*
* @return void
*/
public function getProdutos()
{
$data = Produto::get();
return response()->json($data);
}
}
定义我的路线
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProdutoController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('get_produtos', [ProdutoController::class, 'getProdutos']);
//Route::post('produtos', [ProdutoController::class, 'setProdutos']);
为了测试,我尝试了localhost:8000/get_produtos,它显示了我的数据,正如预期的那样,所以我认为这部分是正确的
[{"id":1,"nome":"Telemovel","preco":124.55,"created_at":null,"updated_at":null},{"id":2,"nome":"Tablet","preco":600.99,"created_at":null,"updated_at":null},{"id":3,"nome":"Portatil","preco":501,"created_at":null,"updated_at":null},{"id":4,"nome":"Caneta","preco":2.55,"created_at":null,"updated_at":null}]
在我的模板中,我使用了此Select
<div :id="selectProdutoID" class="row">
<div :id="optionId" class="col-sm-6" >
<select :id="selectId" class=' form-select form-control-md' v-model='prod' @change="onchange($event)">
<option v-for='data in produto' :value='data.id'>{{ data.nome }} </option>
</select>
</div>
最后这是我的剧本
<script>
export default{
name:"app",
components: {
},
data() {
return{
blankID:"blank",
tituloID:"titulo",
ClienteID:"nomeCliente",
selectId:"selectID",
dropID:"drop",
adicionarID:"adicionarId",
selectProdutoID:"selectProduto",
optionId:"optionId",
qtdID:"qtdId",
boxId:"boxId",
produto: [],
onchange(e){
console.log(e.target.value);
}
}
},
methods:{
getProdutos: function(){
axios.get('get_produtos')
.then(function (response) {
this.produtos = response.data;
}.bind(this));
}
},
created: function(){
this.getProdutos()
}
}
</script>
它甚至没有给我一个错误,只是一个空内容的选择,我试着检查我在这里找到的其他解决方案,但现在没有工作。我相信错误发生在模板/脚本部分的某个地方,但我已经尝试了我找到的一切,仍然没有运气
先谢谢你了
编辑:
发现本教程https://www.tutsmake.com/laravel-9-vue-js-axios-get-request-tutorial/
然后将脚本方法更改为
methods: {
getProdutos(){
axios.get('/get_produtos')
.then((response)=>{
this.produtos = response.data.produtos
})
}
},
created() {
this.getProdutos()
}
但是,数据仍然不显示在我的选择
1条答案
按热度按时间b5lpy0ml1#
我发现了一个解决我的问题的方法。由于某种原因,如果我直接使用this Axios不工作,所以我不得不创建一个变量,它工作