Question

我试图将HTML输入反映在Vue开发工具面板和控制台中，但是它们都不起作用。

我的刀片文件包含此代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <title>Chat Room</title>

  </head>
  <body>
    <div class="container" id="app">
      <div class="row">
        <ul class="list-group offset-4 col-4">
          <li class="list-group-item active">Chat Room</li>
          <input type="text" class="form-control" placeholder="Type your 
message here" v-model="text" @keyup='send'></input>
        </ul>
      </div>
    </div>
    {{-- <script src="{{ asset('js/app.js') }}"></script> --}}
  </body>
</html>

app.js就是这样。

require('./bootstrap');

window.Vue = require('vue');

Vue.component('message', require('./components/message.vue'));

const app = new Vue({
    el: '#app',
    data: {
        text:''
    },
    method:{
      send(){
        console.log(this.message);
      }
    }
});

问题是我没有收到任何错误，但绑定也无法正常工作。我正在寻找要在控制台和Vue面板数据数组中显示的html中的输入文本。

Answer 1

Layout.app已经包含html头和身体标签，不是吗？目前，您正在页面中放置一个全新的页面

因此它将无法正常工作，因为第一个div＃app位于app.blade.php中

编辑：另外，您的脚本还带有刀片行注释标记

Vue“数据”未通过html中的输入标签进行更改

1 个答案: