通过使用Laravel 9和Vue.js 3和Axios从DB中提取数据,得到空白数据

nmpmafwu  于 2022-11-29  发布在  iOS
关注(0)|答案(1)|浏览(104)

你好,我使用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()
        }

但是,数据仍然不显示在我的选择

b5lpy0ml

b5lpy0ml1#

我发现了一个解决我的问题的方法。由于某种原因,如果我直接使用this Axios不工作,所以我不得不创建一个变量,它工作

methods: {
            getProdutos(){
                var vm = this
                axios.get('/get_produtos')
                     .then((response)=>{
                       vm.produtos = response.data
                     })
            }
        },
        created() {
            this.getProdutos()
        }

相关问题