Question

我正在Laravel项目中设置Vue。该页面和Vue组件将在初始加载时加载数据（请参阅城市下拉列表）。但是，加载后，不会记录对组件的任何更改。

首先，我尝试将get请求附加到表单提交中，但是该表单正常提交（即通过HTTP请求而不是AJAX / Vue）。我添加了一个测试变量（消息），并试图在单击按钮时对其进行更新，但它也没有更新。它虽然在mount（）函数中更新。

Vuetools在我的页面上检测到Vue，但未检测到实际组件（“此实例没有反应状态”）。请帮忙！

bootstrap.js

require('./bootstrap');
window.Vue = require('vue');
Vue.config.devtools = process.env.NODE_ENV === 'development';
Vue.component('alerts', require('./components/Alerts.vue').default);
Vue.component('search-result', require('./components/SearchResult.vue').default);
Vue.component('search-bar', require('./components/SearchBar.vue').default);

const app = new Vue({
    el: '.search',
});

webpack.min.js

    const mix = require('laravel-mix');

    mix.js('resources/js/app.js', 'public/js')
       .js('resources/js/main.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .version();

index.blade.php @extends（'layouts.app'）

@section('custom_head')
<script type="text/javascript">
    window.__CITIES_LOADED__ = {!!$cities!!}
</script>
@endsection

@section('content')
<div class="container search">
    <alerts></alerts>
    <div class="row">
        <div class="col">
            <h1 class="text-bold mb-5">Search</h1>  
        </div>
        <div class="col-md-10">
            <search-bar></search-bar>   
        </div>
    </div>
</div>
<div class="w-100 mb-5 mt-5"><hr></div>
@endsection

app.template.php

<!-- head code -->
<body>
<div class="search">
@yield('content')
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
    <script type="text/javascript" src="{{ mix('js/app.js') }}" defer></script>
    <script type="text/javascript" src="{{ mix('js/main.js') }}"></script>
    @yield('custom_js')
</body>

SearchBar组件文件

<template>
    <div class="row p-2">
        <div class="search-bar bg-white rounded col">
            <span v-model="message">{{message}}</span>
            <form @submit.prevent="send">
                <div class="row">
                    <div class="col mb-3">
                        <select name="q[]" id="" class="form-control search-dropdown custom-select custom-select-lg" required v-model="fields.q">
                            <option selected disabled>Select a city</option>
                            <option v-for="city in cities">{{city.concatenated_name}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <input type="text" hidden style="display:none;">
                        <button type="submit" class="btn gradient-button float-right">Find professionals</button>
                    </div>
                </div>
            </form>
            <button v-on:click="warn('Form cannot be submitted yet.', $event)">Test</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cities: JSON.parse(JSON.stringify(window.__CITIES_LOADED__)),
                alerts: {},
                fields: {},
                message: "HELLO",
            }
        },
        methods: {
            send() {
                window.axios.post('/search', this.fields).then(response => {

                    alert('Message sent!');
                }).catch(error => {
                    if (error.response.status === 422) {
                    this.alerts = error.response.data.errors || {};
                }
                });
            },
            test() {
                console.log("Hi");
            }
        },
        mounted() {
            console.log('Component mounted.');
            this.message="Hi";
        },
        components: {

        }
    }
    function City({concatenated_name}) {
        this.concatenated_name = concatenated_name;
    }
</script>

Vuetools屏幕截图

Answer 1

我发现了一些要解决的问题：

1-在您的select中，您的v-model属性使用的变量不存在

2-您不应该在select的选项中使用selected，而是应该像我对city: 0所做的那样，将select的v-model变量设置为所需的值。

3-您忘记设置选项值。

4-使用v-for指令时，请始终记住设置:key指令

{
  data: function() {
    return {
      cities: JSON.parse(JSON.stringify(window.__CITIES_LOADED__)),
      alerts: {},
      fields: {},
      message: "HELLO",
      city: 0
    }

  }
}

<select name="q[]" class="form-control search-dropdown custom-select custom-select-lg" required v-model="city">
  <option value="0">Select a city</option>
  <option v-for="city in cities" :key="city.id" :value="city.id">{{city.concatenated_name}}</option>
</select>

Laravel 5.8 Vue组件在安装后不会更新

1 个答案: