Question

我刚刚开始使用Vue.js，我遇到了一些问题：

我目前正在使用Laravel，一个PHP框架。

我想为研究做一个选择列表，我有不同的应用程序，但都有不同的国家。当我选择一个国家/地区时，我希望只显示此国家/地区的应用。

我曾经使用过php，但我们每次都要重新加载页面，而且使用起来不是很快捷。

我的主页是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>VueJS</title>
  <link rel="stylesheet" href="">
  <script src="/js/vue.js"></script>
 </head>
<body>
     <div id="app">
    <div id="country">
     <select v-model="selectedcountry">
     <option v-for="option in options" v-bind:value="option.value">@{{ option.text }}
        </option>
     </select>
    <span>Sélectionné : @{{ selectedcountry }}</span>
 </div>
  <script src="/js/app.js"></script>
 </body>
 </html>'

我的app.js：

new Vue({
   el: '#country',
   data: {
    selectedcountry: 'All Countries',
      options: [
      { text: 'All Countries', value: 'world' },
      { text: 'Denmark', value: 'denmark' },
      { text: 'France', value: 'france' },
    ]
  }
})'

在我的数据库中，我的表格是：“cards”，其属性称为“country”。

我的控制器是：

<?php

namespace App\Http\Controllers;

use App\Apps;
use Illuminate\Http\Request;

class SearchController extends Controller
{
    public function search(Request $request)
    {
        if ($request->has('Country')) {
            $apps = Apps::where('Country', $request->Country)->get();

            return view('index', compact('apps'));
        }
    }
}

我该怎么做？

Answer 1

我的控制器是：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Apps;
 class SearchController extends Controller
{
  public function search(Request $request){
   if( $request->has('Country') ){
     $apps = Apps::where('Country',$request->Country)->get();
     return view('index',compact('apps'));      
   }        
  }
 }

Answer 2

您必须为您的应用程序创建vue组件。使用组件可以使您的代码更容易且结构更合理，并且使自己与#country和#app混淆，还需要为vue定义表单元素。

laravel vue.js从数据库中选择列表

2 个答案: