Vue 'data' not getting changed through input tag in html

Question

I am trying to get the HTML input to be reflected in the Vue dev tool panel and in the console but none of them are working.

my blade file contains this code.

<!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>

The app.js is like this.

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);
      }
    }
});

The thing is i am not getting any error but the binding is also not working. I am looking for the input text in the html to be displayed in the console and vue panel data array.

r0ulito · Accepted Answer · 2019-04-26 19:00:52Z

1

Layout.app already contains html head and body tags isn't it? At this time you are putting a whole new page inside the page

So it won't work cause the first div#app is in the app.blade.php

EDIT : plus your script is commented with blade line comment markup

answered Apr 26, 2019 at 19:00

r0ulito

4973 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Diwesh kumar Over a year ago

right, but even if i remove the tags it doesn't work.

r0ulito Over a year ago

What about the thing I call pageception?

Diwesh kumar Over a year ago

un-commenting the script tag gives error in the console Uncaught TypeError: Pusher.ScriptReceivers[1] is not a function. I guess that's because layouts.app already contains the js script. but even then this doesn't work.

r0ulito Over a year ago

Can you publish the content of layout.app please?

Diwesh kumar Over a year ago

oh wait...it worked....i stripped down the page of everything and just kept the input tag and changed the 'app' to 'app2'...worked...thanks man.I had tried everything else. sometimes just need to decluter.

Collectives™ on Stack Overflow

Vue 'data' not getting changed through input tag in html

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related