Laravel 5.5・Vue.js 2.9.3で脱JQueryに向けてLaravelでVue.jsが使える環境を作り、テストを始めました。
しかし、PHPファイルに直接コードを書いて表示する事は出来たのですが、ファイルを分けてvueファイル内でDOMの操作をしようとするとエラーが出ます。
この様な方法でコンポーネント化しようとするのは間違っているのでしょうか。
※ちなみにサンプルコードはテキストボックスに文字を入れるとテキスト要素が変更されるというものです。
ご教示宜しくお願いします。
■以下、実現したい(一応、動く)コード
######index.blade.php
php
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Hello Vue</title> 6 <link rel="stylesheet" href="css/app.css"/> 7 <meta name="csrf-token" content="{{ csrf_token() }}"> 8 <script type="text/javascript"> 9 window.Laravel = window.Laravel || {}; 10 window.Laravel.csrfToken = "{{csrf_token()}}"; 11 </script> 12</head> 13<body> 14 15<div id="input_text"> 16 <p> @{{ name }} </p> 17 <p><input type="text" v-model="name"></p> 18</div> 19 20<script> 21 22 (function () { 23 'use strict'; 24 25 var vm = new Vue({ 26 el: '#input_text', 27 data: { 28 name: 'yamada' 29 } 30 }); 31 32 })(); 33 34</script> 35 36<script src="{{asset('js/app.js')}}"></script> 37 38</body> 39</html>
■以下、Component化しようとして動かないコード
######index.blade.php
php
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Hello Vue</title> 6 <link rel="stylesheet" href="css/app.css"/> 7 <meta name="csrf-token" content="{{ csrf_token() }}"> 8 <script type="text/javascript"> 9 window.Laravel = window.Laravel || {}; 10 window.Laravel.csrfToken = "{{csrf_token()}}"; 11 </script> 12</head> 13<body> 14 15<div id="test"> 16 <test></test> 17</div> 18 19<script src="{{asset('js/app.js')}}"></script> 20 21</body> 22</html>
######app.js
javascript
1 2 3require('./bootstrap'); 4 5window.Vue = require('vue'); 6 7Vue.component('test',require('./components/test.vue')); 8 9const test = new Vue({ 10 el: '#test' 11}); 12
######test.vue
javascript
1<template> 2 3 4 <div id="input_text"> 5 <p> {{ name }} </p> 6 <p><input type="text" v-model="name"></p> 7 </div> 8 9</template> 10 11<script> 12 13 (function () { 14 'use strict'; 15 16 var vm = new Vue({ 17 el: '#input_text', 18 data: { 19 name: 'yamada' 20 } 21 }); 22 23 })(); 24 25</script> 26
#####エラーメッセージ
・app.js:32448 [Vue warn]: Cannot find element: #input_text
・[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
回答1件
あなたの回答
tips
プレビュー