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

【问题标题】：Laravel 5.8 Vue component doesn't update after mountedLaravel 5.8 Vue 组件在安装后不更新
【发布时间】：2019-11-28 13:31:39
【问题描述】：

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

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

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 截图

【问题讨论】：

标签： laravel vue.js laravel-5

【解决方案1】：

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

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

2- 你不应该在你的选择选项中使用selected，相反，你应该将选择的 v-model 变量设置为希望的值，就像我对 city: 0 所做的那样。

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>

【讨论】：

谢谢！做了所有这些但 Vuetools 仍然没有检测到组件