Vue'数据'没有通过html中的输入标记进行更改

问题描述 投票:0回答:1

我试图让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);
      }
    }
});

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

javascript laravel vue.js laravel-blade
1个回答
1
投票

Layout.app已经包含了html头部和body标签不是吗?此时,您将在页面中放置一个全新的页面

所以它不会起作用,因为第一个div#app在app.blade.php中

编辑:加上您的脚本注释刀片行注释标记

© www.soinside.com 2019 - 2024. All rights reserved.